Нужно использовать Material UI без компонентов - PullRequest
Новая
       19

Нужно использовать Material UI без компонентов

1 голос
/ 23 июня 2019

Я новичок в интерфейсе материалов.Я использую реагирую, использую класс, а также функциональные компоненты.Но когда я использую компоненты пользовательского интерфейса Material и такие функции, как makeStyles внутри компонента класса, он выдает ошибку перехвата, спрашивая, что вы не можете использовать перехватчики внутри компонентов класса.Я знаю, что хуки - это новая функция, но мне удобно использовать компоненты класса, поэтому я не хочу использовать хуки, но все же хочу использовать пользовательский интерфейс материала.Есть ли способ?Я застрял.

ошибка возникает, когда я использую это: 

const useStyles = makeStyles({
    card: {
      minWidth: 275,
    },
    bullet: {
      display: 'inline-block',
      margin: '0 2px',
      transform: 'scale(0.8)',
    },
    title: {
      fontSize: 14,
    },
    pos: {
      marginBottom: 12,
    },
  });

затем вызывать его внутри компонентов, например, так: const classes1 = useStyles();

У меня также есть путаница относительно того, какиспользовать такие функции, как collapse, которые также используют хуки: 

const [expanded, setExpanded] = React.useState(false);``

```
function handleExpandClick() {
    setExpanded(!expanded);
  }

Мой приоритет - продолжать использовать как классовые, так и функциональные компоненты, хотя мне не нужно использовать компоненты пользовательского интерфейса материала, но все жеиспользуйте пользовательский интерфейс материала в обычной css-форме.Если у меня есть способ использовать материал в обычной css-форме, как будут работать такие вещи, как свернуть?Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Для компонента класса вы должны использовать API компонента высшего порядка (withStyles) вместо API Hooks (makeStyles/useStyles).

0 голосов
/ 23 июня 2019

Чтобы не использовать useStyles, перейдите по этой ссылке: https://material -ui.com / customization / components /

Прокрутите до пункта "Использовать инструменты разработчика", и в нем объясняется, как найти имена классов, которые необходимо переопределить.

И чтобы избежать использования useState, просто используйте состояние компонента Class, с которым, я уверен, вы знакомы. https://reactjs.org/docs/state-and-lifecycle.html

...