将数据从React组件发送到CSS文件

Question

在CSS代码中的::before伪元素中，我想根据在React组件中选择的颜色动态更改盒子阴影的颜色。

React部分

 <>
      <div className="card">
        <div className="percent">
          <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部分

.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: aqua;
  box-shadow: 0 0 10px aqua, 0 0 30px aqua;
}

我在尝试使用React时遇到了一个错误，当我尝试将样式作为根元素发送时。

- sife

---

你应该创建一个组件，在组件中导入你的 CSS 文件，将样式应用于你想要的元素，并根据组件的属性修改和扩展样式。 你不能将 JS 传递给 CSS 文件。请在以下链接中查看 "CSS Stylesheet" 和 "CSS Modules" 标题：https://www.w3schools.com/react/react_css.asp - undefined

你是在问如何在React中动态确定一个值（比如颜色），并让你的CSS使用该值吗？如果是的话，在你的组件中声明一个CSS变量，并通过style属性传递它。让你的CSS类期望一个同名的变量。 - undefined

@MohsenRobatjazi 这个方法不错，但我不认为在这种情况下会起作用，因为我想要更改的属性位于 seduclass 而不是普通元素上。 - undefined

@TimM. 谢谢帮忙 - undefined

你的 off 变量是什么？ - undefined

@Derek off 是我拥有的百分比，我使用它与 strokeDashoffset 一起来设置数值。 - undefined

Answer 1

你需要创建一个解决方案。使用CSS变量是实现你的目标的正确选择。

1. 在根元素或伪元素的父元素上将颜色值设置为CSS变量。 2. 在::before伪元素的所需属性中使用这个CSS变量。

现在这里是一个示例解决方案： React 代码：

<>
  <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 代码：

.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伪元素的box-shadow颜色将根据React组件中指定的colors变量的颜色进行调整和变化。

- AztecCodes