Setting a value in CSS from React

Question

Having trouble parameterizing css such that animationSpeed is taken from props.

I would want to replace the .2s below with animationSpeed

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?
 }

I am having a lot of trouble doing this and was wondering how I could get this done.

Note: this value doesn't change. After we initialize the app it is a constant value. But we have several versions of the App that all have different configurations and animation speeds.

bezzoon · Accepted Answer · 2018-03-16 22:20:59Z

0

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

That's how I accomplished it. It seems to work. : )

Thanks to:

How to change CSS root variable in React?

answered Mar 16, 2018 at 22:20

bezzoon

2,0295 gold badges28 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting a value in CSS from React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related