What is the different between classes prop in mui and className prop when you insert style in to them?

Question

Any idea what is the difference between classes prop in mui and className ? since booth does the same thing as far as I can tell, please note am not asking about the classes variable in the component which might cause a confusion

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& > *': {
        //margin: theme.spacing(0.5),
      },
      padding: 0,
    },
 
 const SomeComponent: React.FC<Props> = () => {
 const classes = useStyles();

 return (
 <div>
  <NativeSelect  className={classes.nativeSelect} classes={classes.nativeSelect}>
  </div>
 )
 
 }

Answer 1

Prop className is used to add styling to the element, while classes is used to Override or extend the styles applied to the component.

So basically, you can create another class into your stylesheet and apply it into className like

.new_class{
color:red;
}

but to override existing classes like .MuiRating-root you have to use classes prop