Regular ClassName with Material UI-CodePudding

I've read some answers to similar questions but did not fully understand because of materialUI update where @mui/styles are depricated.

According to mui docs we can create custom styling using sx prop, smth like this

 <Typography variant="h5" sx={{backgroundColor: 'red' }}>Header</Typography>

But when I use regular classNames in v5 it works well too:

//css

.makeRed {
backgroundColor: red
}
 
// jsx
<Typography variant="h5" className="makeRed">Header</Typography>

The question is - does using regular classes has pitfalls and I need to rewrite mui classes?

(have started my mUI jorney yesterday)

CodePudding user response：

I've been brushing up on Material for a new job and I've found that if you want to make things more easily changeable and run faster you'll work through the framework. The purpose of Material is for enhanced reusability, so you'll want to work with that purpose and align your style in everything you do within the app towards everything being the same.

If anything your best bet is to do:

const useStyles = makeStyles({
makeRed: {
  background-color: 'red'
}

})


export default useStyles;

Then in the actual component just have your classes const as.

const classes = useStyles();
<Typography className = {classes.makeRed} />