如何修改Stripe IbanElement样式：添加边框并匹配表单浮动标签效果？

我在表单中使用了<IbanElement>，希望修改它的样式，使其与表单内其他带有浮动标签的输入框外观一致。目前尝试为该组件添加边框但无法实现，似乎只能通过创建div来包裹<IbanElement>，想询问这是否是唯一的解决方法。

当前代码实现 #

<InputController>
  <InputLabel>
    <TopLabel show />
    <Elements
      stripe={stripePromise}
      options={{ appearance: { theme: 'night', labels: 'floating' } }}
    >
      <IbanElement options={ibanElementOptions} onChange={onIbanChange} />
    </Elements>
    {ibanError ? (
      <FieldError>{ibanError}</FieldError>
    ) : (
      <LabelText>The IBAN of the bank account that we’ll automatically debit</LabelText>
    )}
  </InputLabel>
</InputController>

已尝试的配置 #

const appearance = {
  theme: 'night',
  labels: 'floating'
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

不一定非要用div包裹，优先通过Stripe官方提供的能力自定义样式，以下是几种可行方案：

1. 扩展Appearance API的自定义变量与规则 #

利用Appearance API覆盖主题默认样式，直接配置边框、内边距等属性，让IbanElement和你的表单输入框对齐：

const appearance = {
  theme: 'night',
  labels: 'floating',
  // 自定义全局变量，匹配你的表单输入框样式
  variables: {
    borderRadius: '4px',
    borderWidth: '1px',
    borderColor: '#your-form-border-color',
    colorPrimary: '#your-focus-color',
    padding: '12px 16px',
  },
  // 针对元素的精准样式规则
  rules: {
    '.Input': {
      border: '1px solid var(--borderColor)',
      borderRadius: 'var(--borderRadius)',
      padding: 'var(--padding)',
    },
    '.Input:focus': {
      borderColor: 'var(--colorPrimary)',
      boxShadow: '0 0 0 2px rgba(your-focus-color, 0.2)',
    },
    '.Input--invalid': {
      borderColor: '#error-color',
    }
  }
};

const elements = stripe.elements({ clientSecret, appearance });

2. 复用表单现有CSS类名 #

通过appearance.classes为IbanElement指定你现有表单输入框的类名，直接复用已有样式：

const appearance = {
  theme: 'night',
  labels: 'floating',
  classes: {
    base: 'form-input', // 替换成你表单输入框的基础类名
    focus: 'form-input--focus',
    invalid: 'form-input--invalid'
  }
};

const elements = stripe.elements({ clientSecret, appearance });

3. 包裹div作为兜底方案 #

如果上述API方式无法满足需求，再考虑用div包裹，隐藏IbanElement默认边框，让外层div提供统一样式：

<InputController>
  <InputLabel>
    <TopLabel show />
    <Elements
      stripe={stripePromise}
      options={{ appearance: { theme: 'night', labels: 'floating' } }}
    >
      <div className="iban-input-wrapper">
        <IbanElement options={ibanElementOptions} onChange={onIbanChange} />
      </div>
    </Elements>
    {/* 错误提示和说明文本 */}
  </InputLabel>
</InputController>

对应的CSS：

.iban-input-wrapper {
  border: 1px solid #your-form-border-color;
  border-radius: 4px;
  overflow: hidden;
}

.iban-input-wrapper [data-stripe-element] {
  border: none !important;
  padding: 12px 16px;
}

.iban-input-wrapper [data-stripe-element]:focus {
  outline: none;
}

内容的提问来源于stack exchange，提问作者Sebastián del Arca