React中如何将主文件夹的变量作为属性传入module.css文件？

结论 #

你写的这种写法无法生效，原因是普通CSS（含CSS Module）本身不支持导入JS模块的语法，也不支持JS的模板字符串插值语法，运行时不会解析你写的import语句和${}插值逻辑。

正确实现方案 #

下面是3种常用的可落地方案，按需选择即可：

方案1：使用CSS原生自定义变量（无额外依赖，推荐） #

CSS原生支持全局变量，不需要额外安装工具，所有主流浏览器都兼容：

1. 你可以直接在全局CSS文件（比如global.css）中定义公共变量：

:root {
  --button-background: #FFFFFF;
  /* 其他全局变量依次添加即可 */
}

2. 在任意CSS Module文件中直接调用变量：

/* list.module.css */
.complete {
  background-color: var(--button-background);
}

如果你还是想要用JS文件管理变量，只需要在项目入口文件（比如main.jsx/App.jsx）中把JS变量同步到CSS变量即可：

import { colors } from './variable.js';

// 批量把JS变量转成CSS全局变量
Object.entries(colors).forEach(([key, value]) => {
  // 驼峰转短横线命名，符合CSS变量规范
  const cssVarName = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
  document.documentElement.style.setProperty(cssVarName, value);
});

方案2：使用Sass/SCSS变量 #

如果你的项目已经支持Sass，直接用SCSS变量管理最符合CSS开发习惯：

1. 把变量文件改名为variable.scss，内容按SCSS语法定义：

$button-background: #FFFFFF;

2. 在对应的list.module.scss文件中导入变量文件后调用：

@use '../variable.scss' as *;

.complete {
  background-color: $button-background;
}

注意：如果是用Create React App创建的项目，只需要安装sass依赖即可支持SCSS，不需要额外配置。

方案3：在React组件中结合JS变量和CSS #

如果你不想修改CSS侧的逻辑，直接在组件层结合使用即可：

import styles from './list.module.css';
import { colors } from './variable.js';

function ListItem() {
  // 用行内样式覆盖背景色属性
  return (
    <div 
      className={styles.complete} 
      style={{ backgroundColor: colors.buttonBackground }}
    >
      列表内容
    </div>
  );
}

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