How can I put border styling with react-stripe-elements input component?

Question

About this React component library.

• https://github.com/stripe/react-stripe-elements

How can I put border styling with input component?

<CardElement style={{   base: {     fontSize: '18px',     border: '1px solid red' // it is not work.   }  }} /> 

but, seems they didn't provide custom style interface, though.

• https://stripe.com/docs/elements/reference#element-options\

Anyone know?

Update:

following are sample code that using StripeElement class to apply custom styling.

.StripeElement {   border: 1px solid #eee; }  .StripeElement--invalid {   border: 1px solid red; } 

Answer 1

Great question! As noted here, to apply padding or a border to a Stripe element you want to style the parent DOM node that contains the element, not the element itself:

https://stripe.com/docs/elements/reference#the-element-container

I'd wrap your CardElement in a div and then apply styling to that. As noted above, Elements automatically applies the StripeElement class to the parent element, as well as complete/empty/focus/invalid states.

Answer 2

The simplest solution is:

<div   style={     {      border: '2px solid red'     }   } > </div>