CSS class style not getting updated after binding it

user_4340444 0
Viewed 75

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>
typescript reactjs css html javascript
2 Answers

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'

user_44398960

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

user_176830780
Related