Why Am I unable to dynamically update my CSS values using variable in reactjs?

Question

So, I am trying to update the CSS values using CSS variables. It's my first time of trying to do this though. No error seen, the previous value remained, didn't change. Here are my codes:

CSS variable declaration

:root {
--tx: -0%;
}

.move{ 
 transform: translateX(var(--tx));
}

In my react, I created a useState and provided a -33 value to it for testing

 const [movePosition, setMovePosition] = useState(-33);

I created a function to handle to check if the CSS variable would be updated using the value provided in the movePosition state

const handleNextSlide = ()=>{
  setSlider1(slider1 + 1);
  setSlider2(slider2 + 1);
  setSlider3(slider3 + 1);
 getComputedStyle(document.documentElement).getPropertyValue('--tx', 
 `${movePosition}%`);
 }

I created a button to handle the onClick event that calls the function above

When clicked, the CSS values does not change to the movePosition state value which is -33. I even hard coded it, it still didn't change. How can I make this work?

user_11196771 · Answer

In reactjs you you can update CSS variables by wrapping it in a string

user_9744063 · Answer

The right API to update CSS variables is:

const handleNextSlide = ()=>{
  setSlider1(slider1 + 1);
  setSlider2(slider2 + 1);
  setSlider3(slider3 + 1);
  document.documentElement.style.setProperty('--tx', `${movePosition}%`);
}

Reference: https://css-tricks.com/updating-a-css-variable-with-javascript/

Why Am I unable to dynamically update my CSS values using variable in reactjs?

2 Answers