如何使用 JSX 将 JavaScript 变量传递到 CSS 中？

Question

I understand that CSS can't access JavaScript variables, I have tried creating the react object in an HTML tag, and then tried modifying the style by using this method:

element.style.property = value

However, I create my react object in a return statement, and because I try to modify the object after the return statement, it is essentially ignored.

The element being mapped over is an array of objects, and I would like to access one of the values from the objects.

My description is not very good; hopefully a snipped of my code will better showcase my issue.

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>
  ); 
}

The specific issue is that I would like to change the Chip icon "backgroundColor" style attribute according to the value passed in from the object, but CSS cannot access it, so the backgroundColor is never set.

Answer 1

You're on the right track, just have some syntax errors.

The style prop is meant to be an object , which is why you have the double curly braces {{ and }} closing it out. The outer braces are for the JSX , the inner are for the object. Meaning, instead of:

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

You can do:

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

No equals sign, because backgroundColor .etc are meant to be like object keys, which are assigned in this syntax using : not = . The tag.color also doesn't need the JSX curly braces around it, as they are already in the first JSX { braces and will be interpreted correctly as your variable already.

As an aside, note that using the style attribute is not really recommended . Secondly, note on your <Icon> component as you've done it there, that style will be passed as a prop. To access it and make it render in HTML/CSS, you'll have to do something like props.style and put that in a render or return method to attach those stylings to HTML.

I've made an example of that for you here: https://codesandbox.io/s/react-playground-forked-rzm2d?file=/Icon.js

Note it's an object, so I'm just spreading it into the existing <Icon/> styles so you can make it more component driven (as an example). In this way, you can separate more static styles (like borderRadius ) from dynamic styles (like those derived from tag.color ).