Stripe 类选择器的Rules对象不生效？该如何修复？

开发者阿泽

2026-7-9

解决Stripe auBankAccount组件style.rules中.Input样式不生效的问题

问题原因

Stripe Elements的auBankAccount组件内部DOM结构里，输入框元素的类名并非.Input，你配置的选择器无法匹配到目标元素，导致样式规则不生效。

解决步骤

1. 确认目标元素的实际类名

打开浏览器开发者工具（F12），定位到auBankAccount组件的DOM节点，查看输入框及外层容器的实际类名。通常Stripe Elements的输入元素会带有InputElement类，外层容器带有StripeElement类。

2. 调整样式配置

根据实际类名修改样式配置，推荐两种方式：

方式一：直接在base/invalid中定义样式（官方推荐）

将边框、阴影样式直接写入base和invalid对象，无需依赖rules：

const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    border: '1px solid red',
    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    borderColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
};

方式二：使用正确选择器修改rules

如果必须使用rules，替换为实际匹配的类选择器（示例基于Stripe Elements通用类名）：

const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
  rules: {
    '.StripeElement .InputElement': {
      border: '1px solid red',
      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
    },
  },
};