将数据从react组件发送到css文件

您需要创建一种解决方法.使用css变量是实现目标的适当 Select .

1. 将 colored颜色 值设置为根元素或伪元素的父元素上的css变量.
2. 您必须在::before伪元素的Desired属性中使用此css变量.

下面是一个示例解决方案:

React Code:个

<>
  <div className="card">
    <div className="percent" style={{ "--dot-shadow-color": colors }}>
      <div
        className="dot"
        style={{
          transform: `rotate(${3.6 * off}deg)`,
        }}
      ></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 Code:个

.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 * 85));
  }
}
.dot::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dot-shadow-color, aqua); /* Fallback to 'aqua' if not provided */
  box-shadow: 0 0 10px var(--dot-shadow-color, aqua), 0 0 30px var(--dot-shadow-color, aqua);
}

在这种排列中，.dot类中::before个伪元素的框阴影的 colored颜色 将根据Reaction组件中的colors变量中指定的 colored颜色 进行调整和移动.