Javascript 在运行时读取CSS属性值

我有一个初始化如下的状态变量：

    const App = () => { 
        const [parameters, setParameters] = useState({
            "shape": "circle",
            "fontFamily": "",
            "size": 500
        });

        //...

        // which is here passed to a component
        return(
            <MyCanvas props={parameters} />
        );
    }

const-App=（）=>{
常量[parameters，setParameters]=useState({
“形状”：“圆形”，
“家庭”：“，
“尺寸”：500
});
//...
//它在这里被传递给一个组件
返回(
);
}

参数

数组由另一个在画布上呈现内容的组件使用。我希望参数在应用程序的第一次加载时，在运行时，是当前在CSS中定义的参数，所以我希望读取CSS属性和init，在本例中，是“fontFamily”字段，其中包含用CSS编写的内容。因此，您希望从CSS定义中读取

@font-face{font-family:MyLocalFont；}

属性

一般来说：在运行时如何从CSS读取值以初始化useState变量

---

编译时解决方案不能满足我的需要。对CSS样式的更改无需重新部署我的小部件，因此我需要在初始化时在运行时读取实际的CSS属性值。

您可以使用“classNames”包

从“类名称”导入类名称；
常量测试员=（）=>{
常量[parameters，setParameters]=React.useState({
形状：“圆”，
fontFamily:“”，
尺寸：500，
});
//我想你可以在需要的时候更改字体名称。
React.useffect（（）=>{
setParameters（{…parameters，fontFamily:'NOTSANS'}）；
}, []);
返回(
....

另外，最好按照下面的方法指定一个单独的字体

  const [fonts, setFonts] = React.useState('fontName')
  const [parameters, setParameters] = React.useState({
    shape: 'circle',
    size: 500,
  });

  React.useEffect(() => {
    setFonts('NotoSans');
  }, []);


    <div className="header">
      <div className={classNames(parameters, {
        fontFamily : fonts
      })}></div>

const[fonts，setFonts]=React.useState（'fontName'））
常量[parameters，setParameters]=React.useState({
形状：“圆”，
尺寸：500，
});
React.useffect（（）=>{
setFonts（'NOTSANS'）；
}, []);

导入React，{useCallback}来自“React”；
常量默认参数={
“形状”：“圆形”，
“家庭”：“，
“尺寸”：500，
}
常量App=（）=>{
const[parameters，setParameters]=useState（null）；
const approt=useCallback(
（元素）=>{
const style=window.getComputedStyle（元素）；
const fontFamily=style.getPropertyValue（'font-family'）；
setParameters（{…defaultParameters，fontFamily}）；
}, []
);
//...
返回(
{参数&&}
);
}

语句和问题令人困惑，你能正确地界定问题吗？或者更详细地阐述问题……到底什么是困惑？@Martin这会在一个已编译的应用程序中运行，当css被更改而没有重新编译时？比如说，不编译SCS是否可能？请查看以下答案：。我投票重新打开，因为链接的答案仅限于涵盖构建时功能抱歉，我认为这不适合我的情况。我编辑了我的问题，以澄清我在哪里需要它。参数不进入div，而是用于画布。问题是如何访问js代码中仅在CSSAgain中定义的值，我不需要在div中使用它。我需要在参数数组中使用它。

import classNames from 'classnames';

const Testers = () => {
  const [parameters, setParameters] = React.useState({
    shape: 'circle',
    fontFamily: '',
    size: 500,
  });
//I think you can change the font name when you need it.
  React.useEffect(() => {
    setParameters({ ...parameters, fontFamily: 'NotoSans' });
  }, []);

  return (
       <div className={classNames(parameters></div>

     ....

  const [fonts, setFonts] = React.useState('fontName')
  const [parameters, setParameters] = React.useState({
    shape: 'circle',
    size: 500,
  });

  React.useEffect(() => {
    setFonts('NotoSans');
  }, []);


    <div className="header">
      <div className={classNames(parameters, {
        fontFamily : fonts
      })}></div>

import React, { useCallback } from 'react';

const defaultParameters = {
  "shape": "circle",
  "fontFamily": "",
  "size": 500,
}

const App = () => { 
  const [parameters, setParameters] = useState(null);

  const appRoot = useCallback(
    (element) => {
      const style = window.getComputedStyle(element);
      const fontFamily = style.getPropertyValue('font-family');
      setParameters({...defaultParameters, fontFamily });
    }, []
  );

  //...

  return (
    <div ref={appRoot}>
      { parameters && <MyCanvas props={parameters} /> }
    </div>
  );
}