如何使用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;
}

Answer 1

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

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

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

Answer 2

最简单的解决方案是：

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

Answer 3

我试图添加填充，而包装器div对我来说不起作用。但是，他们added a change反应条带元素以允许卡元素上的className。这对我有用：

在我的CSS中：

.card-element {
  padding: 11.4px 12px;
}

我的CardElement：

<CardElement style={style} className="card-element" />

您仍然必须对元素选项样式中的属性使用内联样式：https://stripe.com/docs/stripe-js/reference#element-options