使用 NextJS 更改 Stripe 支付的自动填充颜色

Question

我们在 NextJS 中使用 Stripe 的 Element 支付功能。 只有this link中与元素支付相关的部分被取出使用。

我用

.StripeElement--webkit-autofill {
  background-color: #2E365630 !important;
}

这个代码(reference)在我使用信用卡时在自动完成功能中填写数字时改变背景颜色，但它没有改变。

我不确定这有多相关，但是

const CARD_OPTIONS = {
  iconStyle: 'solid' as const,
  style: {
    base: {
      iconColor: '#FFFFFF',
      color: '#FFFFFF',
      backgroundColor: '#2E365630',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: process.browser ? (window.innerWidth < 480 ? "16px" : "20px") : "16px",//'16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#FFFFFF',
      },
      '::placeholder': {
        color: '#FFFFFF80',
      },
    },
    invalid: {
      iconColor: '#ef2961',
      color: '#ef2961',
    },
  },
};

这是卡片选项。

如果您不介意我问的话，我在官方文档中找不到更改自动填充背景选项的解释（有一个用于文本颜色）。

Answer 1

条带化文档how to set styles in Elements for pseudo-classes in the Stripe.js reference。

事实上，您已经在上面的代码中使用了该方法来设置前景色：

      ':-webkit-autofill': {
        color: '#FFFFFF',
      },

如果您希望它也设置背景颜色，您可以像添加任何其他属性一样添加它：

      ':-webkit-autofill': {
        color: '#FFFFFF',
        backgroundColor: '#2E365630',
      },