时间戳

首页 > 解决方案 > 使用 NextJS 更改 Stripe 支付的自动填充颜色

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

问题描述

我们在 NextJS 中使用 Stripe 的 Element 支付功能。仅取出并使用该链接中与元素支付相关的部分。

我用

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

当我在使用信用卡时在自动完成功能中填写数字时，此代码（参考）更改背景颜色，但它不会改变。

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

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',
    },
  },
};

这是卡选项。

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

标签： reactjsnext.jsstripe-payments

解决方案

Stripe在 Stripe.js 参考文档中记录了如何在 Elements 中为伪类设置样式。

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

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

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

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

推荐阅读