如何强制 Stripe 的 CardNumberElement 上的卡片徽标预览为灰色？

Question

我有一个 Stripe 输入字段来收集用户的卡号。它运行良好，除了信用卡徽标的预览具有淡蓝色。它与我的 ui 不匹配。我需要在其上应用一个过滤器：grayscale(1)。到目前为止它只适用于浏览器检查器。

我的代码是：

// the css
const Input = styled.div`
  &.CardBrandIcon-container {
    filter: grayscale(1) !important;
  }
`;

const inputStyle = {
  showIcon: true,
  iconStyle: "solid" as StripeCardNumberElementOptions["iconStyle"],
  style: {
    base: {
      color: Color.white,
      fontFamily: `${Font.main}, Helvetica, sans-serif`,
      fontWeight: 600,
      fontSize: "12px",
      "::placeholder": {
        color: Color.grey_dark,
        fontFamily: `sans-serif`,
        fontSize: "12px",
      },
    },
    invalid: {
      color: Color.red,
      iconColor: Color.red,
    },
  },
};


// the component
     
     <Input>
     <CardNumberElement
        id="cardNumber"
        options={inputStyle}
        onBlur={() => setActive(null)}
        onFocus={() => setActive(true)}
        onChange={(e) => handleError(e)}
      />
     </Input>

Answer 1

base color here gives you the grey color of example 4 here.

如何强制 Stripe 的 CardNumberElement 上的卡片徽标预览为灰色？

How to force the card logo preview on Stripe's CardNumberElement to be grey?

stripes

stripe-payments

reactjs