如何使用 react-stripe-elements 输入组件设置边框样式？

Question

关于这个 React 组件库。

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

如何将边框样式与输入组件一起放置？

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

但是，似乎他们没有提供自定义样式界面。

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

有人知道吗？

更新：

以下是使用 StripeElement 类应用自定义样式的示例代码。

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

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

原文由 mitsuruog 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好问题！如此处所述，要将填充或边框应用于 Stripe 元素，您需要为包含该元素的父 DOM 节点设置样式，而不是元素本身：

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

我会将您的 CardElement 包装在一个 div 中，然后对其应用样式。如上所述，Elements 会自动将 StripeElement 类应用于父元素，以及完整/空/焦点/无效状态。

原文由 hpar 发布，翻译遵循 CC BY-SA 3.0 许可协议