Когда использовать 'classes' против 'className' с пользовательским интерфейсом Material?

Question

Я немного запутался с двумя свойствами. Если у меня есть,

const useStyles = makeStyles(() => ({
  style: {
    width: 600,
    height: 400,
  },
}));

Тогда я могу сделать,

const classes = useStyles();

<SomeComponent className={classes.style} />

Но я также могу сделать,

const classes = useStyles();

<SomeComponent classes={classes} />

В чем разница между этими двумя

Answer 1

Когда свойства className недостаточно, и вам необходим доступ к более глубоким элементам, вы можете воспользоваться свойством объекта classes , чтобы настроить все CSS вводится в Material-UI для данного компонента.

Дополнительная информация: https://material-ui.com/customization/components/#overriding -style-with-classes

Answer 2

Это очень запутанный аспект MUI, но как только вы его получите - это очень просто.

Учтите, что вы пишете компонент, и стилизуйте его, используя JSX:

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(1)
  },
  in: {
    padding: 8
  }
}));

function MyComponent(){
  const classes = useStyles();
  return (
    <Outside className={classes.root}>
      <Inside className={classes.in} />
    </Outside>
  )
}

Обратите внимание, что компонент по сути является композицией (или иерархией) компонентов - Outside и Inside в этом минимальном примере, но компоненты MUI часто имеют более двух (стилизованных) вложенных компонентов.

Теперь вы хотите экспортировать этот компонент как часть библиотеки и позволить разработчикам стилизовать все задействованные компоненты (как Outside, так и Inside). Как бы вы это сделали?

Что делает MUI, это позволяет вам предоставить свойство classes (вы увидите в документах имена правил для каждого компонента - root и in в нашем примере ), которые будут объединены с собственными правилами MUI или таблицей стилей, если вы будете sh (в коде MUI это делается с помощью withStyles HO C).

Для удобства каждый компонент также принимает свойство className, которое объединяется с className элемента root (Outside в нашем случае).

Answer 3

className всегда применяется к элементу root компонента, тогда как classes дает вам более глубокий доступ к дочерним элементам стиля компонента через ключ объекта объекта стиля. Это объясняется в документации здесь:

https://material-ui.com/customization/components/