从React中设置CSS中的值

Question

无法参数化css，以便从props中获取animationSpeed。

我想用animationSpeed

替换下面的.2s

transitions.css

.Anim-appear {
  animation: .2s linear pageFadeIn, .2s linear pageSlideInLeft;
}
...

component.jsx

import '../css/transitions.css';

const PageAnimator = props => {
     const animationSpeed = props.animationSpeed + 's' // How to use this to set animationSpeed in CSS?
 }

我在这方面遇到了很多麻烦，并且想知道如何完成这项工作。

注意：此值不会更改。在我们初始化应用程序后，它是一个常量值。但是我们有几个版本的App都有不同的配置和动画速度。

Answer 1

  document.documentElement.style.setProperty('--animation-speed', sec);

我是如何完成它的。它似乎工作。 ：）

感谢：

How to change CSS root variable in React?