How can I edit the styling of a Stripe Card element placeholder using styled components?

Question

I have inherited a codebase where I am supposed to update the styling. Stripe Card elements are being styled using styled components and styled system. I am trying to edit the styling of the placeholder but I am having a hard time figuring out how. I've tried different things but nothing has worked so far. This is what part of the code looks like at the moment:

import css from "@styled-system/css";
import styled from "styled-components";

import { CardElement, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js";

export const StripeCardInput = styled(CardElement)`
  &.StripeElement {
    box-sizing: border-box;
    height: ${(props) => (props.height ? props.height : "32px")};
    border-radius: 2px;
    border-bottom: 2px solid;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    ${css({
      bg: "#F3F4FF",
      borderBottomColor: "black",
      "&:focus-within": {
        borderBottomColor: "blue.60",
      },
    })}
  }

  &.StripeElement--focus {
    border-bottom: 2px solid;
    ${css({
      borderBottomColor: "blue.60",
    })}
  }

  &.StripeElement--invalid {
    ${css({
      borderBottomColor: "red",
    })}
  }

  &.StripeElement--webkit-autofill {
  }
`;

I have tried using the ::placeholder pseudo-class as described here, but I am not sure where exactly to place it. I tried using it like so, but it didn't work:

${css({
      bg: "#F3F4FF",
      borderBottomColor: "black",
      "&:focus-within": {
        borderBottomColor: "blue.60",
      },
      "::placeholder": {
        color: "black"
      }
    })}

I have also tried using it like so, but didn't work either:

&.StripeElement {
    box-sizing: border-box;
    height: ${(props) => (props.height ? props.height : "32px")};
    border-radius: 2px;
    border-bottom: 2px solid;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    "::placeholder": {
      color: "black"
    }
    ${css({
      bg: "#F3F4FF",
      borderBottomColor: "black",
      "&:focus-within": {
        borderBottomColor: "blue.60",
      },
    })}
  }

Any help would be appreciated.

Answer 1

I am not familiar with styled-components, so don’t know if the CardElement is supposed to work with it. The recommended way is to use the style options of the CardElement.

const options: StripeCardElementOptions = {
    ...
    style: {
        base: {
            ...
            '::placeholder': {
                color: 'red',
            },
       }
    }
}

...

<CardElement options={options} />