如何使用 JSX 将 JavaScript 变量传入 CSS？

Question

我了解 CSS 无法访问 JavaScript 变量，我尝试在 HTML 标记中创建 react 对象，然后尝试使用此方法修改样式：

element.style.property = 值

但是，我在 return 语句中创建了我的 react 对象，并且因为我尝试在 return 语句之后修改对象，所以它基本上被忽略了。

被映射的元素是一个对象数组，我想访问对象中的一个值。

我的描述不是很好；希望我的代码片段能更好地展示我的问题。

export default function Chips({tags}) {
  const classes = useStyles();

  const handleDelete = () => {
    console.info('You clicked the delete icon.');
  };

  const handleClick = () => {
    console.info('You clicked the Chip.');
  };

  
  return (
    <div className={classes.root}>
      {tags.map(tag => {
          const tagcolor = String(tag.color);

          return (
            <Chip 
                id="chip"
                className={classes.chip}
                icon={<Icon id="icon" style={{backgroundColor = {tag.color}, borderRadius: '50%'}}/>}
                label={tag.title}
                onClick={handleClick}
            />     
           )
           document.getElementById("icon").style.backgroundColor = tag.color; 
            
      })}    
    </div>
  ); 
}

具体问题是我想根据对象传入的值来改变Chip图标“backgroundColor”样式属性，但是CSS无法访问它，所以从不设置backgroundColor。

Answer 1

你在正确的轨道上，只是有一些语法错误。

style 属性是一个object，这就是为什么你有双花括号{{ 和}} 将其关闭。外大括号are for the JSX，内大括号用于对象。含义，而不是：

style={{backgroundColor = {tag.color}, borderRadius: '50%'}}

你可以这样做：

style={{backgroundColor:tag.color, borderRadius: '50%'}}

没有等号，因为backgroundColor .etc 就像对象键一样，在此语法中使用: 而不是= 分配。 tag.color 也不需要围绕它的 JSX 花括号，因为它们已经在第一个 JSX { 大括号中，并且已经被正确解释为您的变量。

顺便说一句，请注意使用 style attribute is not really recommended。其次，请注意您在那里完成的<Icon> 组件，style 将作为道具传递。要访问它并使其以 HTML/CSS 呈现，您必须执行 props.style 之类的操作并将其放入 render 或 return 方法以将这些样式附加到 HTML。

我在这里为你做了一个例子：https://codesandbox.io/s/react-playground-forked-rzm2d?file=/Icon.js

注意它是一个对象，所以我只是将spreading 加入到现有的<Icon/> 样式中，这样您就可以使它更多地由组件驱动（例如）。通过这种方式，您可以将更多的静态样式（如borderRadius）与动态样式（如从tag.color 派生的样式）分开。