如何使用 react-stripe-elements 输入组件放置边框样式? [英] How can I put border styling with react-stripe-elements input component?

问题描述

关于这个 React 组件库.

About this React component library.

• https://github.com/stripe/react-stripe-elements

如何在输入组件中添加边框样式?

How can I put border styling with input component?

<CardElement style={{
  base: {
    fontSize: '18px',
    border: '1px solid red' // it is not work.
  } 
}} />

但是，似乎他们没有提供自定义样式界面.

but, seems they didn't provide custom style interface, though.

• https://stripe.com/docs/elements/reference#element-options\

有人知道吗?

更新:

以下是使用 StripeElement 类应用自定义样式的示例代码.

following are sample code that using StripeElement class to apply custom styling.

.StripeElement {
  border: 1px solid #eee;
}

.StripeElement--invalid {
  border: 1px solid red;
}

推荐答案

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

Great question! As noted here, to apply padding or a border to a Stripe element you want to style the parent DOM node that contains the element, not the element itself:

https://stripe.com/docs/elements/reference#the-元素容器

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

I'd wrap your CardElement in a div and then apply styling to that. As noted above, Elements automatically applies the StripeElement class to the parent element, as well as complete/empty/focus/invalid states.

这篇关于如何使用 react-stripe-elements 输入组件放置边框样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！