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
}

所有具有网上商店ID或按钮的元素

它看起来应该更像

#webshop button {
  ...
}

Answer 3

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

1。删除逗号，如下：

#Webshop button {
  ...
}

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

3。 img代码应自动关闭，如下所示：<img />。实际上，任何没有文本的元素也应该遵循。

4. ：避免在CSS中使用ID。详细了解CSS Specificity。

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

3 个答案: