导入App.js元素预期为绿色实际显示蓝色，ReactDOM.render也有该问题是什么原因

下面是该颜色异常问题的常见原因及对应处理方法，按优先级依次排查即可：

• 第一步：定位生效样式来源 #

  按F12打开浏览器开发者工具，选中颜色显示异常的元素，查看「样式」面板的color属性：
  若你设置的绿色样式被横线划掉，说明被更高优先级的样式覆盖，可直接看到生效的蓝色样式归属的文件和选择器。
  参考问题现象：
  

• 常见原因1：CSS优先级冲突 #

  全局样式、第三方UI库样式、带!important的样式优先级高于你在App.css中写的类选择器样式，会直接覆盖你的颜色设置。
  解决方案：
  • 调整选择器权重，比如给目标元素加父级选择器提升优先级，例如.app .target { color: green }
  • 删除冲突的蓝色样式，或调整冲突样式的优先级

• 常见原因2：CSS导入顺序错误 #

  如果你在index.js中先导入App.css，后导入index.css或其他全局样式文件，后面文件内的同选择器样式会覆盖前面的设置。
  解决方案：调整导入顺序，全局重置样式放在最前面导入，业务组件的CSS放在靠后位置导入。

• 常见原因3：默认样式未重置 #

  浏览器自带的用户代理样式会给<a>等标签设置默认蓝色，如果你未显式给这类元素设置颜色，就会显示默认蓝色而非你预期的绿色。
  解决方案：项目入口引入CSS重置代码清除默认样式，或显式给目标元素设置color属性。

• 常见原因4：样式绑定错误 #

  若使用CSS Modules、styled-components等方案，可能存在类名绑定错误的问题：比如CSS Modules中写了className="target"而非className={styles.target}，导致你写的绿色样式根本未应用到元素上。
  解决方案：检查样式绑定语法是否符合你使用的CSS方案规范。

• 常见原因5：颜色值拼写错误 #

  检查你写的颜色值是否存在拼写失误，比如把green错写为blue、十六进制颜色#00ff00错写为#0000ff、RGB值参数写反等。

内容的提问来源于stack exchange，提问作者Kaustubh Verma