Next.js如何在组件module.css中像全局CSS那样写样式及简化引用

在module.css中实现全局样式写法 #

CSS Module默认会对自定义类名做哈希处理实现作用域隔离，不会转换原生标签选择器、伪类选择器，之前把section标签选择器硬改成.section类选择器，又没有给所有对应标签加类名，自然会样式错乱。
要实现和全局CSS完全一致的写法，只需要用:global()包裹需要全局生效的选择器即可，不需要修改原有选择器逻辑，示例写法如下：

/* 定义全局:root级CSS变量，和写在全局CSS中效果完全一致 */
:global(:root){
    --orange:#e67e22;
    --black:#333;
    --light-color:#777;
    --border:.1rem solid rgba(0,0,0,.2);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

/* 全局通配选择器重置样式，不会被哈希隔离 */
:global(*){
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
}

/* 全局html标签样式 */
:global(html){
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

/* 全局section标签样式，不需要改写成类选择器，直接生效 */
:global(section){
    padding:2rem 7%;
}

注意：上述全局规则只要在任意一个被页面引入的module.css中定义一次就会全局生效，不要在多个组件的module.css中重复定义相同的全局规则，避免出现样式覆盖冲突。
如果你的标签选择器只需要作用在当前组件内部、不需要污染全局，直接在module.css中写原生标签选择器即可，不需要套:global，这类选择器不会被CSS Module做哈希转换，导入对应module.css后组件内的对应标签会自动匹配样式。

简化组件样式绑定的方法 #

不需要每次都手动写{style.ClassName}绑定类名，有几个非常方便的实践方案：

• 通用全局规则直接写到项目全局CSS文件中（App Router路径为app/globals.css，Pages Router路径为styles/globals.css），比如重置样式、全局标签默认样式、CSS变量这类全局通用的规则，本身就不需要作用域隔离，放到全局CSS后所有组件自动生效，完全不需要绑定类名。
• 组件内部的私有样式优先用原生标签选择器、后代选择器编写，不需要给每个标签都加自定义类名，这类选择器在module.css中会自动作用于当前组件导入后的标签，不需要额外绑定class。
• 涉及多类名拼接、条件类名切换的场景，直接用Next.js默认内置的clsx库处理即可，不需要重复写style.xxx拼接字符串，示例用法：

import styles from './component.module.css'
import clsx from 'clsx'

export default function DemoBlock({ disabled, highlight }) {
  return (
    <div className={clsx(styles.block, disabled && styles.disabled, highlight && styles.highlight)}>
      组件内容
    </div>
  )
}

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