在无状态组件中创建对象时调用函数

Question

我有一个statelss组件，我想在其中使用CSS Variables

import React from 'react';

const Comp = () => {
    return (
        <div
            id='container'>
            <div 
                styles={styles.foo}
                ....
}


const cssVariables = getComputedStyle(document.body);

const styles = {
    foo: {
        borderColor: cssVariables.getPropertyValue('--light-grey'),
    },

export default Comp;

CSS变量的定义如下

:root {
--very-light-grey:rgba(240,240,240,1);
--light-grey:rgba(210,210,210,1);
}

问题是此cssVariables.getPropertyValue('--light-grey')未执行，并且borderColor为空。有办法执行该行吗？ 还是我的方法不对？如何获得--light-grey

的颜色值