In previous versions, Material UI styled components allowed for the use of the className property to selectively apply styles. For example, a component could be styled like this:
const styles = (theme: ThemeType) => ({
root: {
width: '100%',
},
rootLight: {
color: theme.palette.getContrastText(theme.palette.primary.main),
},
})
const useStyles = makeStyles(styles);
function MyComp() {
const classes = useLocalStyles();
return <Input
className={classNames(classes.root, highContrast ? classes.rootLight : undefined)}
value={100}
/>
}
However, in the new API, classes are defined outside the component, similar to styled-components:
const StyledInput = styled(Input)(({theme}) => `
width: '100%',
`);
function MyComp() {
return <StyledInput
value={100}
/>
}
But how can conditional styling be applied now? Would the sx element need to be used, resulting in conditional styling being applied everywhere?