My CSS style sheet is having no impact on my React component

Question

I am attempting to style my React component using a CSS style sheet. I want to change the margins to separate my elements better, but my div class seems to be broken, or I am not understanding this concept correctly. This is the output of my current code:

I would like to add space between the account name input box, and the text.

Here is my React:

renderGetAccountName: function renderGetAccountName() {
return (
  <Dialog onClose={this.onGetAccountNameClose} height={300}>
    <h1 style={dialogHeaderStyle}>
      NAME YOUR ACCOUNT
    </h1>

    <span style={errorMessage}>
      It is time to name your new account! Please enter your choice below, and click "OK" when you are finished.
    </span>


    <div classname="nameInput">
      <form id="frm1" action="form_action.asp">
        ACCOUNT NAME: <input type="text" name="new-account-name"></input>
      </form>
    </div>

    <Button type='button submit' style={submitStyle}>
      OK
    </Button>
    <span>
      <button type="button">Cancel</button>
    </span>

  </Dialog>
);
  }

Here is my CSS:

.gone
  display: none

.contact
.controls
  .dropdown-menu
    li
      border-top: 1px solid #B3B3B3
      cursor: pointer
      padding-top: 8 px
      text-transform: capitalize
      text-align: center
      height: 44 px


      &:hover
         background-color: #EEE

.nameInput
    margin-top: 50px
    margin-left: 50px

Answer 1

Instead of using classname you must use className

Answer 2

Use className={"nameInput"}. The attribute is camel case.