我的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"} 。 該屬性是駝峰式的。