I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique.
For reference, you can see an instance in MUI's documentation where they utilize classnames to assign multiple classes to an element (expand to view the source code in the example).
What I aim to do is merge a custom class that I have created using JSS with one that must override the MUI class. The classes in question are as follows:
const styles = {
insetListItemText: { // Intended for targeting MUI's class
'&:first-child': {
paddingLeft: '1em',
},
},
link: { // A standard JSS class
textDecoration: 'underline',
textDecorationColor: '#ccc',
},
}
In this scenario, I am trying to use classnames to apply both of these classes:
// import classNames from 'classnames'
<ListItemText
inset
classes={
classNames({
inset: classes.insetListItemText,
[classes.link]: true
})
}
>
List item text
</ListItemText>
I am facing challenges in merging the two methodologies syntax-wise. Any insights or suggestions would be greatly appreciated!