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

Posted 2023-03-21

【中文标题】如何使用 react-stripe-elements 输入组件设置边框样式？

【英文标题】：How can I put border styling with react-stripe-elements input component?

【发布时间】：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;

【问题讨论】：

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

【参考方案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>
)