Next.js CSS Module 全局样式穿透解决样式不生效问题

场景

场景一

引入的highlight.css代码高亮样式无效。

场景二

使用JavaScript动态添加的样式不生效。

原因

场景一

使用了page.module.css模块化样式，Next.js编译后会动态给样式选择器添加哈希值，增加了样式权重。

场景二

Next.js编译后的模块化样式因为添加了哈希值，所以动态添加的样式不等于了page.module.css中定义的样式了。

解决

场景一

对于.hljs样式被覆盖问题，使用CSS原生的:not()伪类选择器，配合:global()，让自定义的code样式只在非.hljs元素上生效，这样就不会干扰高亮的样式了。

.post pre code:not(:global(.hljs)) {
    background: rgba(27, 31, 35, .05);
}

场景二

使用CSS Module预留的:global()指令，在编译时保留原始名称，不再添加哈希值。

:global()的作用是让样式成为全局样式，所以需要考虑是否影响其他页面。

:global(.bg-img) {
    color: red;
}