Today I decided to experiment with updating CSS values using CSS variables for the first time. Unfortunately, I encountered an issue where the previous value did not change despite my efforts. Here is the snippet of code I used:
CSS variable declaration
:root {
--tx: -0%;
}
.move{
transform: translateX(var(--tx));
}
In my React project, I utilized a useState hook and initially set it to a value of -33 for testing purposes.
const [movePosition, setMovePosition] = useState(-33);
I then proceeded to create a function to update the CSS variable based on the current value stored in the movePosition state.
const handleNextSlide = ()=>{
setSlider1(slider1 + 1);
setSlider2(slider2 + 1);
setSlider3(slider3 + 1);
getComputedStyle(document.documentElement).getPropertyValue('--tx',
`${movePosition}%`);
}
To trigger this function, I added a button that listens for the onClick event.
<MdNavigateNext onClick={handleNextSlide}/>
Despite all my efforts, clicking the button did not result in the CSS values changing to the desired movePosition state value of -33. Even hard coding it did not yield the expected outcome. Any suggestions on how to resolve this issue?