Create React App中CSS Modules设置display:grid被覆盖如何解决

首先纠正一个常见误区：浏览器内置的user agent stylesheet优先级是所有样式里最低的，只要你写的自定义样式正确匹配到目标元素，绝对不可能被UA样式覆盖。你在开发者工具里看到UA的display属性生效，本质是你写的display: grid规则根本没有成功作用到目标元素上，浏览器找不到任何自定义的display配置，才会fallback到默认样式。
结合Create React App + CSS Modules的使用场景，按以下步骤排查修复即可：

• 第一步：确认CSS Modules的命名、导入、绑定写法完全正确
  Create React App默认的CSS Modules规则要求样式文件必须以.module.css为后缀，比如Layout.module.css，导入和类名绑定不能写错：
  错误写法（会直接导致样式不生效）：

  // 错误1：样式文件没加.module后缀，不会按CSS Modules规则处理
  import './Layout.css'
  function Page() {
    // 错误2：直接传字符串类名，没有使用导入的样式对象
    return <div className="grid-wrapper">页面内容</div>
  }
  

  正确写法示例：

  // 样式文件名为 Layout.module.css
  import styles from './Layout.module.css';
  function Page() {
    // 绑定CSS Modules生成的哈希类名
    return <div className={styles.gridWrapper}>页面内容</div>
  }
  

  对应CSS文件里的写法：

  .gridWrapper {
    display: grid;
    /* 排查阶段可以加个非常明显的样式比如红边框，快速确认类名是否绑定成功 */
    border: 2px solid red;
  }
  

• 第二步：检查CSS代码是否存在语法错误、意外覆盖
  如果类名绑定正确，先看CSS文件里display: grid所在规则块的上一行是不是少写了分号、有没有漏写闭合大括号，这类语法错误会导致浏览器直接忽略后续的样式规则。
  另外检查有没有同优先级的选择器在后面覆盖了grid配置，比如你先给类设置了display: grid，后面又写了个标签选择器给同元素设置了display: block，后者会覆盖前者。
• 第三步：确认类名绑定的是目标元素
  很多人排查半天会发现自己把类名绑到了目标元素的父级或者子级上，真正要改的元素根本没吃到样式，自然会显示UA默认的display值。比如你要给列表容器设grid，结果类名绑到了外层的section上，列表本身还是默认的block布局。
• 快速验证技巧
  打开Chrome开发者工具Elements面板，选中你要设置grid的元素，看右侧Styles面板：

  如果完全搜不到你写的display: grid规则，就是类名绑定/导入/CSS语法的问题，和样式优先级没有任何关系；
  如果能看到你写的display: grid但是被划了横线，直接看面板里标注的覆盖来源，对应调整选择器优先级或者删掉冲突的样式即可。

内容的提问来源于stack exchange，提问作者Mfoniso Ukpabio