相同CSS下React应用与静态网页渲染效果不同如何修复？

问题原因与解决方法 #

核心原因 #

你提供的CSS核心规则是.about .title，这条规则仅会作用于祖先元素存在about类的title类元素，目前最可能的问题是你React代码中的title类div外层缺少对应的about类父容器，导致样式无法匹配，渲染效果和静态页不同。

其他可能的原因 #

• React脚手架默认的全局基础样式和静态页的默认样式不一致，自带的边距、行高重置规则影响了标签的默认渲染效果
• 部分类名拼写错误、你引入的Header组件自带的CSS存在全局样式冲突，覆盖了你写的自定义样式
• React代码中h3标签的文本比静态页多了多余空格，触发了文本排版的细微差异

修复步骤 #

1. 比对静态页的DOM结构，给React中title类div的外层补全about类的父容器，示例代码如下：

<div className="about">
  <div className="title">
    {/* 原有内容保持不变 */}
  </div>
</div>

2. 在你的CSS文件最开头添加全局样式重置规则，统一不同环境的默认样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 打开浏览器开发者工具，选中React页面中的title元素，查看对应样式列表：如果看不到.about .title的规则说明选择器仍不匹配，检查层级和类名拼写；如果规则存在但被划掉，说明有更高优先级的样式覆盖，调整CSS优先级即可。
4. 将React中h3标签的文本修改为和静态页完全一致的Lorem Ipsum?，消除多余空格的影响。

内容的提问来源于stack exchange，提问作者Muhammad Alif Darmamulia