StripeElements won't style

Question

I've got my Stripe form as below, that loads just fine

  render() {
    const createOptions = (fontSize: string) => {
      return {
        style: {
          base: {
            fontSize,
            color: '#424770',
            letterSpacing: '0.025em',
            fontFamily: 'Source Code Pro, monospace',
            '::placeholder': {
              color: '#aab7c4',
            },
          },
          invalid: {
            color: '#9e2146',
          },
        },
      };
    };

    return (
      <div className={styles.cardsection}>
        <form onSubmit={this.handleSubmit}>
        <label>
        Card Details
            <CardElement {...createOptions(this.props.fontSize)} />
          </label>
          <button>
            {this.state.paid === 'waiting' ? 'Please wait...' : 'Confirm order'}
          </button>
        </form>
      </div>
    );
  }
}

export default injectStripe(CheckoutForm);

And I have my styles.less file:

.cardsection {
  width: 60%;
  margin: auto;
  margin-top: 30px;
  background-color: #f6f9fc;
  padding: 20px;

  label {
    color: #6b7c93;
    font-weight: 300;
    letter-spacing: 0.025em;

    .StripeElement {
      display: block;
      margin: 10px 0 20px 0;
      max-width: 500px;
      padding: 10px 14px;
      box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
      border-radius: 4px;
      background: white;
    }

    .StripeElement--focus {
      box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
      -webkit-transition: all 150ms ease;
      transition: all 150ms ease;
    }
  }
}

button {
  white-space: nowrap;
  border: 0;
  outline: 0;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: #6772e5;
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  margin-top: 10px;
}

button:hover {
  color: #fff;
  cursor: pointer;
  background-color: #7795f8;
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
}

For some reason, I cannot style the StripeElements. All my other styling works just fine, but the Stripe Elements don't. I've checked the HTML loaded, and within the label is my div called StripeElement

As you can see from the below, the input box is not styled.

I am using the React-Stripe-Element library and its implemented on an SSR app using Next.js

EDIT: I've found the problem, but I'm not sure how to overcome it. When my app gets build, my classes are assigned a random variable in both the css and the html.

For example, cardsection becomes cardsection__Xy12xg2. The problem is that in my HTML, StripeElement stays as StripeElement, but my CSS becomes StripeElement__28vnshY

Any ideas how to overcome this?

Answer 1

Solution is to pass the StripeElement class directly into the Stripe component as a property:

    <CardElement {...createOptions(this.props.fontSize)} className={styles.StripeElement} />