Styling Mailchimp sign up form in React

Question

I am trying to use the NPM React module for Mailchimp: https://www.npmjs.com/package/react-mailchimp-form. It works great and gives you all the forms that you may need but I am struggling to style it.

It says that you can add a personalized class for CSS styling, but how will that contain styles for all elements on the form?

Currently the form looks like this:

function MailchimpForm() {
   return (
       <div>
           <Mailchimp
               action=
               fields={[
                   {
                       name: 'EMAIL',
                       placeholder: 'Email',
                       type: 'email',
                       required: true
                   },
                   {
                       name: 'COMPANY',
                       placeholder: 'name',
                       type: 'text',
                       required: true
                   }
               ]}
               // Change predetermined language
               messages={
                   {
                       sending: "Sending...",
                       success: "Thank you for subscribing!",
                       error: "An unexpected internal error has occurred.",
                       empty: "You must write an e-mail.",
                       duplicate: "Too many subscribe attempts for this email address",
                       button: "Subscribe!"
                   }
               }
               // Add a personalized class
               className='MailchimpStyle'
           />
       </div>
   )
}

Where MailchimpStyle is my CSS style class. Is there a way to have multiple CSS styles in a class?

The current class looks like:

.MailchimpStyle {
    clear: left;
    font: 200px Helvetica, Arial, sans-serif;
}

Answer 1

You should be able to access the elements by specifying the elements after the className in the css sheet. Example for button:

.MailchimpStyle button {
  clear: left;
  color: black;
  background-color: white;
  margin: 2px;
}