[BUG]: Custom styling fails for Payment Elements (Secure, 1-click checkout with Link)

[Wulff-1996]

What happened?

Styling the payment elements causes problems for the section 'Secure, 1-click checkout with Link' here the email input field does not get the correct css styles.

The field gets this css class that overrides my styles:

.p-PaymentAccordionUnsafeAppearanceTheme--flat :where(.Block) :is(.Input,.CodeInput,.CheckboxInput:not(.CheckboxInput--checked)) {
    background: #fff !important;
}

The other input fields get correct styling. Im styling the Payment Elements with the following code:

const appearance: Appearance = {
    theme: 'flat',
    variables: {
      colorPrimary: '#F0F1F3',
      colorBackground: '#1A202B',
      colorText: '#F0F1F3',
      colorDanger: '#FF336C',
      colorSuccess: '#00F27F',
      colorWarning: '#FF9849',
      colorTextSecondary: '#89909C',
      colorTextPlaceholder: '#89909C',
      iconCheckmarkColor: '#F0F1F3',
      fontFamily: 'Roboto, sans-serif',
      spacingUnit: '3px',
      borderRadius: '9.5px',
      gridRowSpacing: '25px',
      logoColor: 'dark',
      tabLogoColor: 'dark',
      blockLogoColor: 'dark',
    },
    rules: {
      '.AccordionItem': {
        backgroundColor: '#1A202B'
      },
      '.Input': {
        backgroundColor: '#252D3D',
        fontSize: '13px',
        border: '1px solid transparent'
      },
      '.Input:focus': {
        outline: '0',
        border: '1px solid #B9BEC7',
        boxShadow: 'none'
      },
      '.Input--invalid': {
        outline: '0',
        border: '1px solid rgba(255, 51, 108, 0.6)',
        boxShadow: 'none'
      },
      '.Label': {
        textTransform: 'uppercase',
        color: '#89909C',
        letterSpacing: '1.5px',
        fontWeight: '500',
        fontSize: '11px',
        marginBottom: '10px'
      },
      '.Error': {
        fontSize: '13px',
        color: '#FF336C',
        marginTop: '11px'
      },
      '.Checkbox': {
        height: '17px',
        width: '17px',
      },
      '.CheckboxInput': {
        border: '1px solid #89909C',
        color: '#F0F1F3',
        borderRadius: '3px',
        userSelect: 'none',
        transition: '200ms ease-out background-color, 200ms ease-out border-color'
      },
      '.CheckboxInput--checked': {
        borderColor: '#B9BEC7',
        backgroundColor: 'rgba(185, 190, 199, 0.2)',
      },
      '.CheckboxInput:focus': {
        outline: '0',
        boxShadow: 'none'
      },
    }
  }
  const options: StripePaymentElementOptions = {
    layout: {
      type: 'accordion',
      defaultCollapsed: false,
      radios: true,
      spacedAccordionItems: true
    },
    fields: {},
  }
  state.elements = props.stripe!.elements({
    clientSecret: props.clientSecret,
    appearance
  })

  state.paymentElement = state.elements!.create('payment', options)
  state.paymentElement!.on('change', props.paymentElementChangedCallback)
  state.paymentElement!.mount('#payment-element')

Screenshot of the bug:

As you can see the input fields for Stripe Link is barely visibible.

The css styles:

Environment

No response

Reproduction

No response

[tylersmith-stripe]

Hey @Wulff-1996, thank you for flagging this issue! We will take a look internally and see what we can do to improve this hardcoded style causing you issues.

In the meantime, I'd suggest trying a different theme as a starting point, since that style is scoped specifically to the flat theme.

night gets pretty close, if you add some additional rules declarations to remove shadows/borders that are not present in your current styling.

I added the following:

'.AccordionItem': {
  // keep what you had previously
  border: '1px solid #1A202B'
},
'.Input': {
  // keep what you had previously
  boxShadow: 'none'
},

[Wulff-1996]

Hey thanks for the quick response; it worked perfectly! We will just use the night theme for now with your suggestions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.