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

Question

我有一个条纹输入字段来收集用户的卡号。它工作得很好，除了信用卡标志的预览是淡蓝色的。它与我的用户界面不匹配。我需要应用一个过滤器： 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>

标签： reactjsstripe-paymentsstripes

Answer 1

此处的基色为您提供此处示例 4的灰色。