I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out.
Here is the code that is currently working:
const classes = props.classes;
return (
<List
component="div"
data-testid="SelectionListt"
className={classes.selectionList__sites}
>
</List>
);
The question I have is how can I convert the className using template literals?
This is my attempted solution:
const classes = props.classes;
return (
<List
component="div"
data-testid="SelectionListt"
className={` ${classes + ".selectionList__sites"} `}`
>
</List>
);Here is my selectionList__sites styling:
selectionList__sites: {
backgroundColor: "white",
"&:hover": {
backgroundColor: "red",
color: "black",
border: "1px solid yellow",
},
},English is not my native language, so there may be some errors in my writing.