導入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() 中才能使其工作。 那么也許有更好的方法？