在Next.js的CSS Module中如何使用radix-ui/colors变量？

完全可以用 Next.js + 原生 CSS（全局样式 + CSS Module）实现，不需要依赖 styled-components/stitches，问题出在全局变量的配置和引用方式上，具体解决步骤如下：

1. 正确配置全局样式文件 #

在项目的全局样式文件（如 globals.css）中直接导入 Radix UI Colors 的 CSS 文件，Radix 的颜色文件会自动在 :root 选择器下声明全局变量，无需手动重复定义：

/* globals.css */
/* 按需导入你需要的颜色组，这里以蓝色系为例 */
@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/blue-dark.css';

2. 确保全局样式在 _app 中生效 #

在 _app.tsx（或 _app.jsx）中导入全局样式文件，确保全局变量作用于整个应用：

// _app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

3. 在 CSS Module 中直接引用全局颜色变量 #

CSS Module 默认可以访问全局 CSS 变量，直接通过 var() 语法调用即可：

/* components/Button.module.css */
.button {
  background-color: var(--blue-6);
  color: var(--blue-12);
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

排查要点（如果仍无法读取变量） #

• 确认已正确安装依赖：执行 npm install @radix-ui/colors 或 yarn add @radix-ui/colors
• 检查 globals.css 的导入路径是否正确，_app.tsx 是否确实引入了全局样式
• 禁止在 CSS Module 文件中直接导入 Radix 颜色文件，这会导致 :root 选择器重复声明，引发样式冲突和报错

自定义全局颜色变量（可选） #

如果需要基于 Radix 颜色自定义全局变量，可在 globals.css 的 :root 中扩展：

/* globals.css */
@import '@radix-ui/colors/blue.css';

:root {
  /* 基于 Radix 颜色定义自定义全局变量 */
  --primary-button-bg: var(--blue-7);
  --primary-button-text: var(--blue-1);
}

之后在 CSS Module 中直接使用 var(--primary-button-bg) 即可。

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