React中如何修改Sass module导出的SCSS变量值

你没法直接修改通过:export导出的SCSS变量值，本质原因是：所有以$开头的Sass变量都是编译期静态常量，在构建阶段Sass预处理器就会把所有变量引用替换成固定的字面量值，编译完成后这些变量就彻底消失了，根本不会进入浏览器运行时环境。你通过styles.maxWidth读到的只是构建阶段就写死的静态字符串，和原SCSS变量没有任何运行时绑定关系，修改它不会对页面样式产生任何影响。

你之前提到的CSS自定义属性（CSS变量）是实现运行时动态修改样式值的最优方案，它在CSS Modules中完全可以正常生效，之前无法使用通常是写法错误，下面是正确实现方式：

1. 样式文件写法调整 #

在Card.module.scss中把静态SCSS变量替换成CSS自定义属性，:export导出初始值的逻辑可以保留，不冲突：

// 组件根类上定义自定义属性默认值
.card {
  --card-max-width: 100%;
  max-width: var(--card-max-width);
  // 其余原有样式
}

// 如需在JS中读取初始默认值，可正常导出
:export {
  defaultMaxWidth: var(--card-max-width);
}

2. 运行时动态修改值 #

在React组件中通过原生setProperty方法修改元素上的CSS自定义属性即可，修改后所有引用该属性的样式会自动更新：

import styles from "../styles/Card.module.scss";
import { useRef } from "react";

export default function Card() {
  const cardRef = useRef(null);

  // 需要修改宽度时调用该方法即可
  const changeMaxWidth = (newWidth) => {
    cardRef.current.style.setProperty("--card-max-width", newWidth);
  };

  return (
    <div className={styles.card} ref={cardRef}>
      {/* 组件业务内容 */}
      <button onClick={() => changeMaxWidth("720px")}>调整宽度为720px</button>
    </div>
  );
}

3. 固定值场景简化方案 #

如果你需要修改的宽度是几个固定枚举值，不需要支持任意动态值，可以直接通过切换类名实现，不需要操作DOM：

.card {
  --card-max-width: 100%;
  max-width: var(--card-max-width);
}
/* 预定义不同尺寸对应的类 */
.card-size-narrow {
  --card-max-width: 600px;
}
.card-size-wide {
  --card-max-width: 1200px;
}

组件中根据状态动态绑定className即可，比操作ref更简洁。

• 不要尝试直接修改import引入的styles对象上的属性，CSS Modules在Vite、Webpack等构建工具的默认配置下导出的是只读对象，就算强行修改属性值，也不会同步到页面样式，没有实际作用。
• CSS自定义属性的继承、优先级规则和普通CSS属性完全一致，行内设置的属性优先级最高，会覆盖样式文件中定义的默认值，符合常规CSS开发逻辑。

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