React组件同一div内部分标题与段落CSS样式不生效问题

问题现象 #

开发React项目时遇到CSS样式无法作用于部分标题和段落元素的问题：同一个div容器内，一部分标题和段落可以正常加载CSS样式，另一部分却无法生效。

• 已尝试给两类元素分别设置相同className和不同className，均未解决问题
• 交换两个模块的位置后，原本生效的样式依旧正常生效，仅「Stay in the loop」相关模块始终无法加载CSS
• 当前组件其余元素的CSS样式均运行正常，新增样式是在同一组件内编写的

预期效果 #

新增的「Stay in the loop」模块样式要和「meet babish cookware」模块样式保持一致。

相关代码 #

React组件代码 #

const Cookware = () => {
    return (
        <div className="CookwareMainDiv">
            <h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
            <p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
            <br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
            <button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
            <hr/>
            <h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
            <p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
        </div>
    )
}
export default Cookware

CSS代码 #

/*
Cookware
*/
.CookwareMainDiv
{
  width: 80%;
  height:500px;
  margin: auto;
  box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
  font-weight: 100;
  text-align: center;
  margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
  text-transform: uppercase;
  margin-top: 10%;
  font-size:large;
  letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
  margin-top: 5%;
  word-spacing: 5px;
  font-weight: 300;
}
.CookwareMainDivSubDiv1
{
  width: 50%;
  height: 400px;
  margin: auto;
}
.CookwareMainDivSubDiv1b1 
{
  height: 60px;
  width: 300px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 16px;
  letter-spacing: 2px;
  margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
  margin-top: 5%;
  margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
  width: 400px;
  height: 30px;
  border: 2px solid black;
  background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
  width: 100px;
  height: 50px;
  background-color: transparent;
  border:2px solid black;
  margin-left: 30%;
}
.CookwareisSubmitted input
{
  width: 90%;
  height: 50px;
  text-align: center;
  border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
  width: 30%;
  height: 50px;
  text-align: center;
  margin-bottom: 20%;
}

问题根因 #

第二个h4和p元素未正确声明className属性，仅填写了类名，导致CSS选择器无法匹配到对应元素，样式自然无法生效。

修复方案 #

将出错的两个元素的属性补全为标准的className声明即可：

// 修复前
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
<p CookwareMainDivSubDiv1p1>More products are coming...</p>

// 修复后
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming...</p>

内容的提问来源于stack exchange，提问作者Maryam Naveed