CSS class style not getting updated after binding it-CodePudding

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 > <span>Data123</span></td>

CodePudding user response：

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'

CodePudding user response：

I think your issue is that you missed space. try adding space between ${!row.status ? classes.disableRow : ""} and ${classes[row.customClass]}