如何从React组件向CSS传值，动态修改::before伪元素的box-shadow颜色

因为伪元素（比如::before）无法直接通过React元素的style属性设置样式，推荐使用CSS变量实现动态颜色控制，具体步骤如下：

1. 修改CSS代码，用CSS变量替代固定颜色 #

将.dot::before中的固定颜色aqua替换为自定义CSS变量（如--dot-color）：

.dot {
  position: absolute;
  inset: 5px;
  z-index: 10;
  animation: anmationdot 2s linear forwards;
}
@keyframes anmationdot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    /* 可选：替换成和组件一致的计算逻辑，避免动画与实际旋转值不一致 */
    transform: rotate(calc(3.6 * var(--dot-percent)));
  }
}
.dot::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dot-color);
  box-shadow: 0 0 10px var(--dot-color), 0 0 30px var(--dot-color);
}

2. 在React组件中设置CSS变量 #

在.dot元素的style属性中添加CSS变量--dot-color，值为组件中选中的colors变量；如果要同步动画旋转值，可额外添加--dot-percent：

<>
  <div className="card">
    <div className="percent">
      <div
        className="dot"
        style={{
          transform: `rotate(${3.6 * off}deg)`,
          '--dot-color': colors,
          '--dot-percent': off // 可选：同步动画中的旋转百分比
        }}
      ></div>
      <svg>
        <circle cx={70} cy={70} r={70}></circle>
        <circle
          cx={70}
          cy={70}
          r={70}
          style={{
            stroke: colors,
            strokeDasharray: 440,
            strokeDashoffset: 440 - (440 * off) / 100,
          }}
        ></circle>
      </svg>
    </div>
  </div>
</>

原理说明 #

CSS变量会被元素的伪元素继承，在.dot元素上设置的--dot-color可被.dot::before读取并应用，从而实现根据React组件中的colors变量动态修改伪元素的背景色和阴影颜色。

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