导入css变量到next.js中的tsx文件

Question

我正在使用 next.js，假设我有一个 myStyles.css 文件，如下所示：

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

现在我想在 .tsx 文件中使用这个变量值。 我怎样才能做到这一点？

Answer 1

这是我到目前为止得到的：

import styles from './myStyles.css';

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

它可以工作，但看起来不太好，因为您需要等到 DOM 元素加载完毕，所以您必须将它放在 React.useEffect() 中才能使其工作。 那么也许有更好的方法？