Not able to customize CSS of CardElement

[Nikhil22]

Feature request or idea? Consider opening an API review!

Summary

Here is my code. I am trying to override the margin.

  const CARD_ELEMENT_OPTIONS = {
    style: {
      base: {
        color: "#32325d",
        margin: '10px 0 20px 0',
        "::placeholder": {
          color: "#aab7c4",
        },
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a",
      },
    },
  };

  return (
    <>
      {lang.cardDetails}
      <CardElement options={CARD_ELEMENT_OPTIONS} />
    </>
  );
};

export default PaymentCard;

However, I am getting an error in the console.

Unrecognized property: margin is not a customizable CSS property for the card Element.

The same thing happens with just about any other property (i.e padding, maxWidth).

How do I override margin, etc of the CardElement?

Other information

[asolove-stripe]

Hi @Nikhil22! Yeah, you can't customize the margin, or some other css properties, within Elements. Please see the Style object docs for exact info on the options we support.

Depending on what you need, you may want to use our padding style, or you may want to apply the margin to the DOM node that you are rendering the Element inside.