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

Any idea what is the 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>
 )
 
 }

CodePudding user response：

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

CodePudding user response：

className usually applies styles to the root element while classes can target descendant elements or components or even their states. E.g. NativeSelect component renders an icon component, you can pass an icon class to the classes object, or apply styles when the component is disabled etc.