我的CSS样式表对我的React组件没有影响

Question

我正在尝试使用CSS样式表设置我的React组件的样式。我想更改边距以更好地分隔我的元素，但我的div类似乎被打破了，或者我没有正确理解这个概念。这是我当前代码的输出：

我想在帐户名输入框和文本之间添加空格。

这是我的反应：

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>
);
  }

这是我的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

您必须使用classname

，而不是使用className

Answer 2

使用className={"nameInput"}。该属性是驼峰式的。