Next.js 13无需添加'use client'，如何覆盖CSS模块样式？

问题原因 #

Next.js 13中，服务器组件的CSS模块会被编译为全局唯一类名，由于服务器端渲染的样式注入顺序，组件自身的CSS模块样式优先级可能高于传入的自定义样式，导致覆盖失败；而添加'use client'后组件转为客户端组件，样式注入顺序改变，自定义样式才得以生效。

解决方案 #

方案1：利用CSS变量实现样式覆盖（推荐）

通过CSS变量机制，完全脱离组件类型限制实现样式覆盖：

1. 在button.module.css中，将固定样式改为CSS变量+默认值：

.btn {
  background-color: var(--button-bg, green);
  /* 其他按钮基础样式 */
}

2. 在home.module.css的customButton类中，定义变量的自定义值：

.customButton {
  --button-bg: purple;
  /* 其他自定义样式 */
}

3. 在page.tsx中正常使用组件并传入className：

import Button from './button';
import styles from './home.module.css';

export default function Home() {
  return <Button className={styles.customButton}>测试按钮</Button>;
}

CSS变量会优先覆盖默认值，无论组件是服务器还是客户端类型都能生效。

方案2：提高自定义样式的CSS特异性

通过增强自定义样式的选择器特异性，让其优先级高于组件自身的CSS模块样式：

1. 在home.module.css中，给customButton类添加元素选择器提升特异性：

button.customButton {
  background-color: purple;
}

button.customButton（元素+类选择器）的特异性高于组件中单纯的.btn（类选择器），会优先生效。
2. 在page.tsx中正常传入className即可。

方案3：调整组件类名拼接顺序（补充方案）

当组件与自定义样式的选择器特异性相同时，可通过调整类名在HTML中的顺序尝试覆盖：
在button.tsx中，将传入的className放在组件自身类名之后：

import styles from './button.module.css';

export default function Button({ className, children }) {
  return (
    <button className={`${styles.btn} ${className}`}>
      {children}
    </button>
  );
}

注：该方案依赖样式加载顺序，在服务器组件中可能存在稳定性问题，仅作为前两种方案的补充。

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