CSS樣式不適用於React組件中的按鈕

Question

我的index.html文件中有我的CSS樣式表，其中加載了我的React應用程序。 在這里，我有以下CSS值：

#Webshop {
      background-color: white;
      height: 100%;
      width: 100%;
}

和

#Webshop, button {
      position: relative
      border: 6px solid #232323
      z-index: 2
      padding: 12px 22px
      margin: 0 10px
      box-sizing: border-box
      font-size: 26px
      font-weight: 600
      text-transform: uppercase
      text-decoration: none
      color: #232323
}

Webshop位於包含此Render方法的不同文件中：

render() {
        return (
            <div className='Webshop' id='Webshop'>
                <li>
                    <img src="./products.jpeg" width="350" height="350"></img>
                    <button onClick={this.handleClick} className="addit">Add to cart</button>
                    <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                    </select>
                    <img src="./product.jpeg" width="350" height="350"></img>
                </li>
            </div>
        );
    }

出於某種原因，CSS適用於網上商店，但不適用於按鈕。 我還有其他文件中的其他組件。 如何將CSS應用於Render方法中的按鈕？

Answer 1

嘗試單獨應用按鈕樣式。 目前第二種風格適用於#webshop和button因為你用逗號分隔它們，這很奇怪，為什么你會將相同的樣式應用於div元素和按鈕元素？ 嘗試使用#webshop button或#webshop > button ，分別應用按鈕樣式。

此外，您在第二個樣式位的每個屬性的末尾都缺少分號，這可能是一個問題。

Answer 2

檢查https://www.w3schools.com/cssref/css_selectors.asp

現在你正在申請

#Webshop, button {
  position: relative
  border: 6px solid #232323
  z-index: 2
  padding: 12px 22px
  margin: 0 10px
  box-sizing: border-box
  font-size: 26px
  font-weight: 600
  text-transform: uppercase
  text-decoration: none
  color: #232323
}

對於所有具有Webshop id或按鈕的元素，

它看起來應該更像

#webshop button {
  ...
}

Answer 3

前兩個是關鍵，后兩個是建議。

1.刪除這樣的逗號：

#Webshop button {
  ...
}

2. CSS分號是必須的，而在JavaScript中你可以省略它們，我們鼓勵它們在Standard.js規則中這樣做。

3. img標簽應該是自動關閉的，如下所示： <img /> 。 實際上，任何沒有文本的元素也應該遵循。

4.避免在CSS中使用ID。 閱讀有關CSS特異性的更多信息。