[英]CSS style is not applying to button in React component
I have my CSS stylesheet in my index.html file where my React app is loaded. 我的index.html文件中有我的CSS样式表,其中加载了我的React应用程序。 In here I have the following CSS values :
在这里,我有以下CSS值:
#Webshop {
background-color: white;
height: 100%;
width: 100%;
}
and 和
#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 is located in a different file that contains this Render method: 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>
);
}
For some reason the CSS applies to Webshop but not to the button. 出于某种原因,CSS适用于网上商店,但不适用于按钮。 I have other Components in other files the work also.
我还有其他文件中的其他组件。 How can I get the CSS to apply to the button in the Render method?
如何将CSS应用于Render方法中的按钮?
Try applying button style separately. 尝试单独应用按钮样式。 Currently the second style applies to
#webshop
and button
as you separated them with comma, which is strange, why would you apply same styling to a div element and a button element? 目前第二种风格适用于
#webshop
和button
因为你用逗号分隔它们,这很奇怪,为什么你会将相同的样式应用于div元素和按钮元素? Try doing #webshop button
or #webshop > button
instead and applying button styles separately. 尝试使用
#webshop button
或#webshop > button
,分别应用按钮样式。
Also you are missing semicolons at the end of each property in the second style bit which is probably an issue here. 此外,您在第二个样式位的每个属性的末尾都缺少分号,这可能是一个问题。
Check https://www.w3schools.com/cssref/css_selectors.asp 检查https://www.w3schools.com/cssref/css_selectors.asp
Right now you are applying 现在你正在申请
#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
}
to all elements that either have Webshop id or are buttons, 对于所有具有Webshop id或按钮的元素,
it should look more like 它看起来应该更像
#webshop button {
...
}
The first two are critical, the last two are advices. 前两个是关键,后两个是建议。
1. remove the comma like so: 1.删除这样的逗号:
#Webshop button {
...
}
2. CSS semicolons are a must, while in JavaScript you can omit them, which is being encouraged to do so in Standard.js rules. 2. CSS分号是必须的,而在JavaScript中你可以省略它们,我们鼓励它们在Standard.js规则中这样做。
3. The img
tags should be self-closing like so: <img />
. 3.
img
标签应该是自动关闭的,如下所示: <img />
。 In fact any element without a text within them should follow as well. 实际上,任何没有文本的元素也应该遵循。
4. Avoid using IDs in your CSS. 4.避免在CSS中使用ID。 Read more about CSS Specificity .
阅读有关CSS特异性的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.