Next.js自定义模块样式链式选择器失效问题排查

问题根源是Next.js的CSS模块会给每个类名自动添加唯一哈希后缀，比如.header会变成.header_abc123，.headerContainer变成.headerContainer_def456。你原来写的.header .headerContainer会被编译成.header_abc123 .headerContainer，但页面上的元素类名是.headerContainer_def456，自然匹配不上。

下面是几种正确的写法：

方法1：使用原生CSS嵌套（推荐，无需额外依赖） #

Next.js支持原生CSS嵌套语法，用&指代当前父选择器，编译时会自动带上正确的哈希后缀：

.header {
  /* 已生效的主样式 */
  background: #f5f5f5;

  & .headerContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
}

编译后会生成类似.header_abc123 .headerContainer_def456的选择器，完美匹配页面上的类名。

方法2：用SCSS/Sass嵌套（需项目支持SCSS） #

如果你的项目已经安装sass依赖并配置了SCSS支持，可以直接写更简洁的嵌套：

.header {
  background: #f5f5f5;

  .headerContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
}

SCSS会自动处理嵌套关系，Next.js的CSS模块也会给每个类名加上正确的哈希。

方法3：显式拼接类名哈希（不推荐，写法繁琐） #

如果不想用嵌套，也可以在CSS中用@value引用同一个模块里的类名，但写法不够直观：

@value headerContainer: './Home.module.css';

.header {
  background: #f5f5f5;
}

.header .headerContainer {
  max-width: 1200px;
}

最后确认组件里的类名导入正确：确保使用styles.header和styles.headerContainer，不要写错变量名。

内容的提问来源于stack exchange，提问作者Ivditi Gabeskiria