Material-ui: @ material-ui / styles: Использование в компоненте класса?

Вы не можете использовать хуки внутри компонента класса. Вам нужен функциональный компонент или использовать более высокий порядок ( withStyles ).

Заканчиваю, если мы увидим подобный отчет, думаю, мы должны его задокументировать.

@oliviertassinari : Но если приложение объявлено как класс, как мне это сделать?
Потому что в приложении у меня есть состояние и другие функции.

@ Angelk90 Вам следует использовать API компонентов более высокого порядка: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

Согласно вашей документации, пример использования withStyles api по-прежнему является функциональным компонентом.

https://material-ui.com/styles/basics/

Вот почему я проголосовал против вашего ответа.

@oliviertassinari
Как я могу использовать makeStyles с HOC?
В соответствии с моим вариантом использования мне нужен объект темы материала в стиле style.

По предложению @ ghosh-jaideep,
как получить возможность использовать утилиты темы, такие как:

[theme.breakpoints.up("md")]: {
          paddingLeft: theme.spacing(2),
          paddingTop: theme.spacing(2)
}

внутри компонента класса?
благодаря

я использовал withStyles вместо makeStyle вот так ...

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

@ Ess-Soft Как LoginComponent отображается из родительских компонентов?

• Вы передавали тему как реквизит?
• Вы использовали ThemeProvider в родительском компоненте?

Будет полезнее, если вы поделитесь фрагментом кода родительского компонента.

Я сделал то же самое, что и @ Ess-Soft, и добавил widthTheme раньше withStyles
withTheme(withStyles(useStyles)(LoginComponent ))

тогда вы можете использовать theme даже внутри render

Может кто-нибудь объяснить эту вещь со стилями. Я могу честно сказать, что когда я вижу подобные вещи, я думаю, да ладно, чувак, Angular намного более нормален. 3 часа сегодня ищу и ищу ответы, а потом я нахожу это.

@ xtianus79 Этот API также работает с компонентами класса: https://material-ui.com/styles/basics/#higher -order-component-api.

@oliviertassinari, можете ли вы показать пример этого с сеткой? lol, это то, что я пытаюсь сделать, и я застрял прямо здесь. Я использую makeStyles и createStyles и не могу понять, как это сделать без функции? Вы можете помочь с этим?

@ xtianus79 Дополнительную помощь можно найти на StackOverflow

@oliviertassinari для этой конкретной проблемы и

Эммм. до сих пор даже https://material-ui.com/styles/basics/#higher -order-component-api не отвечает, как использовать «тему»? почему поддерживает только функциональные компоненты с хуками? у людей действительно есть устаревший код или потребность в компонентах на основе классов.

@DewangS См. withTheme() : https://material-ui.com/styles/api/#withtheme -component-component.