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

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

I have a Stripe input field to collect the user's card number. It works well, except that the preview of the creditcard logo has a pale blue color. it doesn't match my ui. I need to apply a filter: grayscale(1) on it. It only works on the browser inspector so far.

My code is:

// 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>

Solution