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

最简单的解决方案是：

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

Answer 2

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

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

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

Answer 3

我试图添加填充，但包装 div 对我不起作用。然而，他们对react-stripe-elements进行了更改，以允许className在卡片上使用元素。这对我有用：

在我的CSS中：

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

对于我的 CardElement：

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

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