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

【问题标题】：How can I put border styling with react-stripe-elements input component?如何使用 react-stripe-elements 输入组件设置边框样式？
【发布时间】：2017-10-13 22:24:05
【问题描述】：

关于这个 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;
}

【问题讨论】：

感谢您发布更新，这是唯一对我有用的东西。

标签： reactjs stripe-payments

【解决方案1】：

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

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

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

【讨论】：

上面的链接现在是404。更新的页面在这里：stripe.com/docs/js/element/the_element_container

【解决方案2】：

最简单的解决方案是：

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

【讨论】：

【解决方案3】：

我试图添加填充，而包装器 div 对我不起作用。但是，他们 added a change 对 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

【讨论】：

【解决方案4】：

在文档中有对 options 属性的引用，您可以将其添加到 CardElement 组件中：

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

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

【讨论】：