如何在React中动态更新CSS Module的@Value变量值

CSS Module 中通过@value定义的变量是构建期静态常量，打包阶段会被直接替换为固定字面量值，不支持运行时从React组件侧动态修改。要实现动态修改圆角的需求，可以选择以下两种可落地的方案。

适合仅单个属性需要动态修改的简单场景，实现成本最低：

• 调整原box.css，移除固定写死的border-radius声明（也可以保留默认值，行内样式优先级更高会自动覆盖）：

.box{
    height: 200px;
    width: 300px;
    border: 10px solid #595252;
    padding: 100px;
    margin: 50px;
}

• 在React组件中通过state控制行内样式的border-radius值即可：

import { useState } from 'react';
import styles from './box.css';

export default function DemoBox() {
  // 圆角值可根据业务逻辑动态更新
  const [radius, setRadius] = useState(0);

  return (
    <div className={styles.box} style={{ borderRadius: `${radius}px` }}>
      {/* 示例：滑块控制圆角大小 */}
      <input 
        type="range" 
        min="0" 
        max="100" 
        value={radius}
        onChange={(e) => setRadius(Number(e.target.value))}
      />
    </div>
  )
}

适合动态值需要在多条CSS规则、多个子组件中复用的场景，灵活性更高：

• 改造box.css，将原@value静态变量替换为原生CSS自定义属性，支持设置默认兜底值：

.box{
    height: 200px;
    width: 300px;
    border: 10px solid #595252;
    /* var()第二个参数为默认值 */
    border-radius: var(--box-radius, 0px);
    padding: 100px;
    margin: 50px;
}

• 在React组件中动态给元素挂载CSS变量即可，所有继承该变量的CSS规则都会自动更新：

import { useState } from 'react';
import styles from './box.css';

export default function DemoBox() {
  const [radius, setRadius] = useState(0);

  return (
    <div 
      className={styles.box} 
      // 动态传入CSS变量值
      style={{ '--box-radius': `${radius}px` }}
    >
      <input 
        type="range" 
        min="0" 
        max="100" 
        value={radius}
        onChange={(e) => setRadius(Number(e.target.value))}
      />
    </div>
  )
}

如果需要全局生效的动态样式值，还可以把CSS变量挂载到:root节点上，整个应用的样式都可以读取该值。

CSS Module的@value语法是PostCSS插件在构建阶段处理的语法糖，打包完成后，代码中所有引用@value变量的位置都会被直接替换为对应的静态值，最终生成的CSS文件里不存在任何变量实体，因此运行时没有可以修改的变量入口。

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