React TypeScript应用中通过变量动态更新SCSS类属性

你原本想直接修改SCSS编译后类样式的思路不可行。SCSS在项目构建打包阶段就会被编译成静态CSS文件，类中定义的样式值都是固定的，运行时无法直接修改类定义里的属性。

两种方案都能实现动态宽度需求，且子元素可自动继承父元素宽度，不需要额外做复杂处理：

方案1：内联样式覆盖（最简单，推荐优先用） #

内联样式优先级高于外部CSS类的样式，直接把计算好的动态宽度通过style属性挂在父元素上，就能覆盖SCSS里写死的240px宽度。父元素宽度生效后，子元素只要没设置单独的固定宽度，默认就会遵循父元素的宽度约束，自动撑满父宽度。

修改后的组件代码如下：

// 原有数组计算逻辑保留
var betweenTimeIndexes = [];
for (var i = fromTimeIndex; i <= toTimeIndex; i++) {
  betweenTimeIndexes.push(i);
}
// 记得拼接px单位
const dynamicWidth = `${betweenTimeIndexes.length * 200}px`;

return(
  <div 
    className={styles.ActiveWide} 
    defaultValue={fromTimeIndex}
    style={{ width: dynamicWidth }} // 新增这行内联样式即可
  >
    <div className={styles.ActiveWideTimeSpan}>
      <div className={styles.ActiveWideFromText}>{fromText}</div>
      <div className={styles.ActiveWideDash}></div>
      <div className={styles.ActiveWideToText}>{toText}</div>
    </div>
  </div>
);

SCSS文件里原来写死的width: 240px可以保留当兜底默认值，也可以直接删掉，内联样式会自动覆盖它。如果要让子元素显式和父元素同宽，给子元素加width: 100%就行，不需要单独计算宽度值。

方案2：CSS变量传值（适合多子元素复用动态值的场景） #

如果后续其他子元素的样式也需要用到这个动态计算的宽度值，可以用CSS变量实现，维护性更好：

1. 先修改SCSS代码，把固定宽度替换为CSS变量，设置默认兜底值：

.ActiveWide{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  // 用CSS变量接收动态宽度，240px为默认兜底值
  width: var(--active-wide-width, 240px);
  height: 96px;
  left: 156px;
  top: 136px;
  background: rgba(62, 177, 200, 0.5);
  border-bottom: 2px solid #C4D600;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;

  // 子元素直接宽度100%即可撑满父元素
  .ActiveWideTimeSpan {
    width: 100%;
  }
}

2. 组件中把计算好的宽度值传给CSS变量即可：

const dynamicWidth = `${betweenTimeIndexes.length * 200}px`;
return(
  <div 
    className={styles.ActiveWide} 
    defaultValue={fromTimeIndex}
    style={{ '--active-wide-width': dynamicWidth }}
  >
    {/* 原有子元素内容不变 */}
  </div>
);

提示：就算用CSS Modules，CSS变量也不会被编译重命名，在当前元素的所有后代元素中都可以直接读取使用，不需要额外配置。

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