React中在Stripe Elements中使用现有CSS类的问题

嘿，我之前也踩过这个坑！你遇到的问题是因为React版本的Stripe Elements（也就是@stripe/react-stripe-js）的API和基础Stripe JS文档里的写法不一样——直接给CardElement传classes属性是无效的，得把它放到options对象里才行。

修正后的代码示例 #

import { CardElement } from '@stripe/react-stripe-js';

const customStripeOptions = {
  classes: {
    base: 'app-form-default input',
    // 还可以按需添加其他状态的类，比如聚焦/错误态
    focus: 'app-form-focus',
    error: 'app-form-error'
  }
};

class MyPaymentForm extends Component {
  render() {
    return(
      <div>
        <CardElement options={customStripeOptions} />
      </div>
    );
  }
}

额外注意事项 #

• CSS权重问题：如果自定义样式还是没生效，检查一下你的CSS类选择器权重是否足够。Stripe的默认样式会用类似.StripeElement这样的选择器，你可以用更具体的选择器（比如父容器类+自定义类）来覆盖，比如：

  .payment-form-container .app-form-default.input {
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ddd;
  }
  

• 动态状态样式：如果需要根据元素状态（比如聚焦、错误）调整样式，别忘了在classes对象里对应添加focus、error等状态类，Stripe会在元素进入对应状态时自动应用这些类。

内容的提问来源于stack exchange，提问作者Sam