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

user_1855830 0
Viewed 60489

About this React component library.

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.

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;
}
stripe-payments reactjs
4 Answers

The simplest solution is:

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

In the docs there is a reference to an options prop which you can add to the CardElement component:

const cardElementOptions = {
  style: {
    base: {
      color: "#666",
      fontSize: "20px",
    },
    invalid: {
      color: "#fa755a",
      fontSize: "20px",
    }
  }
}

return (
  <form onSubmit={handleOnSubmit}>
    <CardElement options={cardElementOptions} />
    <button type="submit">Submit</button>
  </form>
)

See also https://stripe.com/docs/js/appendix/style

user_78500150
Related