如何在React中通过JS变量sdg匹配CSS预设值动态设置按钮颜色

问题根因 #

constructor执行时组件还未挂载到真实DOM，此时既无法通过getComputedStyle获取元素样式，className绑定的CSS规则也不会生效，只有render执行完成、元素渲染到页面后样式才会生效。

方案1：在constructor中读取全局CSS变量赋值 #

你的CSS已经在根节点定义了对应SDG的颜色变量，直接读取根节点的CSS变量即可，无需依赖渲染后的元素：

// 原有sdg定义保留
const sdg = "SDG06";
// 新增获取SDG颜色的方法
const getSdgColor = (sdgCode: string) => {
  // 读取根元素的CSS变量，trim去除多余空格
  return getComputedStyle(document.documentElement).getPropertyValue(`--${sdgCode}color`).trim();
};

然后修改constructor中的state初始化逻辑：

this.state = {
  // 替换原来的硬编码颜色为获取到的SDG色值
  button1color: getSdgColor(sdg),
  button2color: getSdgColor(sdg),
  shouldShowModal: false,
  onlyCloseWithButton: true,
};

方案2：更推荐的CSS类复用方案 #

和你header的实现逻辑完全一致，直接给按钮绑定对应SDG的样式类即可，不需要在JS中处理颜色逻辑，也不会受渲染时机影响：

1. 删掉constructor中button1color、button2color的硬编码初始值，同时删掉handleClick之外所有和按钮颜色相关的JS逻辑
2. 修改render中按钮的className，拼接SDG变量：

<button
  // 拼接SDG样式类
  className={`answerButtonleft colour_${sdg}`}
  // 初始状态下不设置行内backgroundColor，由CSS类控制样式
  style={{ backgroundColor: this.state.button1color || undefined }}
  type="button"
  onClick={() => {
    this.handleClick();
    setTimeout(() => this.openModal(), 1000);
  }}
>
  The passenger car
</button>

该方案直接复用你现有的CSS规则，代码更简洁，维护成本更低。

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