Import css variable to the tsx file in next.js

Question

I'm working with next.js and let's say I have a myStyles.css file like this:

.root {
 --my-custom-variable: 1;
}

Now I want to use this variable value in the.tsx file. How can I do this?

Answer 1

This is what i got so far:

import styles from './myStyles.css';

const result = getComputedStyle(document.getElementsByClassName(styles.root)[0]).getPropertyValue('--my-custom-variable')

It's working but doesn't look very nice, because you will need to wait until the DOM element is loaded, so you'll have to put this inside React.useEffect() to make it work. So maybe there's a better way?