CSS 样式不适用于 React 组件中的按钮答案

【问题标题】：CSS style is not applying to button in React componentCSS 样式不适用于 React 组件中的按钮
【发布时间】：2017-04-15 06:36:26
【问题描述】：

我的 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 适用于 Webshop，但不适用于按钮。我在其他文件中有其他组件也可以工作。如何让 CSS 应用于 Render 方法中的按钮？

【问题讨论】：

我的回答有帮助还是问题仍然存在？

标签： javascript html css reactjs

【解决方案1】：

前两个是关键，后两个是建议。

1. 像这样删除逗号：

#Webshop button {
  ...
}

2. CSS 分号是必须的，而在 JavaScript 中可以省略它们，Standard.js 规则中鼓励这样做。

3. img 标签应该像这样自动关闭：<img />。事实上，任何没有文本的元素也应该跟随。

4. 避免在 CSS 中使用 ID。阅读有关CSS Specificity 的更多信息。

【讨论】：

我不敢相信我错过了如此明显的错误。写代码的时候我已经筋疲力尽了 :P 但无论如何，谢谢你的额外提示。

【解决方案2】：

尝试单独应用按钮样式。目前，第二种样式适用于#webshop 和button，因为您用逗号分隔它们，这很奇怪，为什么要将相同的样式应用于 div 元素和按钮元素？尝试改用#webshop button 或#webshop > button 并分别应用按钮样式。

另外，您在第二个样式位的每个属性末尾缺少分号，这可能是这里的一个问题。

【讨论】：

【解决方案3】：

查看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 {
  ...
}

【讨论】：