React-Stripe-Elements element not rendering style as expected

Question

I'm trying to setup React-Stripe-Elements and while I was able to get the basic form to render, it does so in a really funky looking way. I even tried to add CSS from a form I found online and it won't render in the CardElement properly. How can I get React-Stripe-Elements to render with the proper UI or UI that even remotely resembles the UI on the docs?

The CardElement is currently rendering like:

And my card element file looks like:

import React from 'react';
import {CardElement} from 'react-stripe-elements';

class CardSection extends React.Component {
  render() {
    return (
      <label>
        Card details
        <CardElement style= {{ base: { color: '#fff',
    fontWeight: 500,
    fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
    fontSize: '15px',
    fontSmoothing: 'antialiased' }}} />
        </label>
    );
  }
};

export default CardSection;

Answer 1

I'm not sure what your definition of "funky" is - it might be better to add a link to a specific element and state what is different than you expect.

If I were to guess, I would say a few things are probably not as you like:

• 100% width - I think the package assumes you want a 100% width input. For example, I have all my inputs 100% but they are in containers of the smaller width that I want on the screen.
• No border - you can add a border if you like. The input is usually more visible when the page has a background color other than white.
• Height or padding - this could be a function of not seeing the true borders.

You can check out some more styling options that they use in their demo here: https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js

This answer might also be helpful https://stackoverflow.com/a/43986418/5049215