I am working on a react project and came across this issue. i am passing my custom class name ${row.customClass} to the component and i am trying to style the same like shown in the below CSS section. when i checked in the developer tools, i can see that the class sample is been added to the along with other class like shown in HTML section. but the style is not getting applied for the custom class sample. all other styles are getting applied. can anyone tell me what’s wrong?
return (
<tr key={index}>
{
rows.map((row, index) => {
return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
}${row.customClass}`}> <customComponent></customComponent></td>
})
}
</tr>
)
CSS
const useStyles = makeStyles(
(theme) => ({
row: {
padding: "10px",
"& span": {
wordBreak:"break-all"
}
},
disableRow: {
color: "grey"
},
sample:{
background:"red",
}
})
);
HTML
<td class="makeStyles-row-42 sample"> <span>Data123</span></td>
You are passing to classNames the the key 'sample' instead of passing it the key associated with the class you create with makeStyles.
For example look at the other classes you add, you do
${classes.row}
Not
${'row'}
If you want to get the class associated with "sample" in your makeStyles you need to do this:
rows.map((row, index) => {
return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
}${classes[row.customClass]}`}> <customComponent></customComponent></td>
})
}
Where row.customClass needs to be 'sample'
I think your issue is that you missed space. try adding space between ${!row.status ? classes.disableRow : ""} and ${classes[row.customClass]}