关于这个 React 组件库。
如何在输入组件中放置边框样式？
<CardElement style={{
base: {
fontSize: '18px',
border: '1px solid red' // it is not work.
}
}} />
但是，似乎他们没有提供自定义样式界面。
有人知道吗？
更新：
以下是使用StripeElement类应用自定义样式的示例代码。
.StripeElement {
border: 1px solid #eee;
}
.StripeElement--invalid {
border: 1px solid red;
}
好问题！如此处所述，要将填充或边框应用于 Stripe 元素，您需要为包含该元素的父 DOM 节点设置样式，而不是元素本身：
https://stripe.com/docs/elements/reference#the-element-container
我会将您的 CardElement 包装在一个 div 中，然后对其应用样式。如上所述，Elements 自动将StripeElement类应用于父元素，以及完整/空/焦点/无效状态。
最简单的解决方案是：
<div
style={
{
border: '2px solid red'
}
}
>
</div>
我试图添加填充，而包装器 div 对我不起作用。但是，他们对 react-stripe-element 进行了更改，以允许className在卡片元素上使用a 。这对我有用：
在我的 css 中：
.card-element {
padding: 11.4px 12px;
}
对于我的 CardElement：
<CardElement style={style} className="card-element" />
您仍然必须对元素选项样式中的属性使用内联样式：https : //stripe.com/docs/stripe-js/reference#element-options
在文档中有一个对optionsprops的引用，您可以将其添加到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>
)