i'm trying to learn template literals, i have project of mine i need to use template literals there, i have a question which seems very simple, but dont know what i am doing wrong
this is working:
const classes = props.classes;
return (
<List
component="div"
data-testid="SelectionListt"
className={classes.selectionList__sites}
>
</List>
);
my question is how should i turn that className using template literals.
This is what i have done:
const classes = props.classes;
return (
<List
component="div"
data-testid="SelectionListt"
className={` ${classes + ".selectionList__sites"} `}`
>
</List>
);this is my selectionList__sites:
selectionList__sites: {
backgroundColor: "white",
"&:hover": {
backgroundColor: " red",
color: "black",
border: "1px solid yellow",
},
},English is not my mother language so there could be mistakes.
Template literals have no need for regular quotes inside them, basically the entire content between backticks is handled as a string, except for values inside ${}.
Assuming that props.classes is a string, I would write your className like this:
className={`${classes}.selectionList__sites`}