Неверный вызов ловушки. Хуки можно вызывать только внутри тела функционального компонента при применении стиля к базовому компоненту класса с помощью material-ui

Я только начал изучать реакцию с помощью material-ui, но получаю эту ошибку при применении стиля к моему компоненту. Мой код:

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
}));

class NavMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false
        };
    }
    render() {
        const classes = useStyles();
        return (
            <div className = {classes.root}>
                <AppBar position = "static">
                    <Toolbar>
                        <IconButton
                            edge = "start"
                            className = {classes.menuButton}
                            color = "inherit"
                            aria-label = "Menu"
                        >
                            <MenuIcon />
                        </IconButton>
                        <Typography
                            variant = "h6"
                            className = {classes.title}
                        >
                            News
                        </Typography>
                        <Button color = "inherit">Login</Button>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}
export default NavMenu;

и это Ошибка:

Вместо этого используйте withStyles, тогда classes появится как props.

— 27.05.2019 19:10

это сработало. Спасибо. но теперь я не могу использовать "marginRight: theme.spacing(2)". Есть ли способ использовать makeStyles с классами?

— 27.05.2019 19:28

reactjs material-ui

27.05.2019 19:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

26 741

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Функция material-ui makeStyles работает только внутри функциональных компонентов, так как внутри она использует новые API-интерфейсы React Hooks.

У вас есть два варианта:

Преобразуйте компонент класса в функциональный компонент.
Используйте компонент более высокого порядка как в документации по материалам

Я лично рекомендую первый подход, поскольку он становится новым стандартом в разработке React. Этот учебник может помочь вам начать работу с функциональными компонентами. и проверьте документы для React Hooks

что, если мне нужно сохранить состояние внутри объекта? Документы material-ui построены с использованием этой функции везде. Другой вариант — преобразовать материал класса в простой CSS, что утомительно, но надежно.

— 29.06.2019 23:32

Сохранение состояния внутри функционального компонента с помощью useState — это то, что нужно!

— 04.07.2019 16:56

27.05.2019 20:32

если вы создали функциональный компонент и все еще сталкиваетесь с этой проблемой... Следующее, что нужно искать, это версии зависимостей.

Я попробовал новый стекблиц-проект для тестирования компонента material-ui и получил эту ошибку. Мои зависимости были:

react 16.12
react-dom 16.12
@material-ui/core 4.9.14

Поэтому мне пришлось перейти на последнюю версию реакции, используя react@latest и react-dom@latest, что привело меня к следующему:

react 16.13.1
react-dom 16.13.1
@material-ui/core 4.9.14

Делитесь здесь, чтобы помочь другим людям, которые столкнулись с этим... спасибо эта почта за подсказку

12.05.2020 01:37

Используйте withStyles:

App.js:

import {withStyles} from '@material-ui/core/styles'
// ...

const styles = theme => ({
    paper: {
        padding: theme.spacing(2),
        // ...
    },
    // ...
})

class App extends React.Component {
    render() {
        const {classes} = this.props
        // ...
    }
}

export default withStyles(styles)(App)

Root.js:

import React, {Component} from 'react'
import App from './App'
import {ThemeProvider} from '@material-ui/styles'
import theme from '../theme'

export default class Root extends Component {
    render() {
        return (
                <ThemeProvider theme = {theme}>
                    <App/>
                </ThemeProvider>
        )
    }
}

theme.js:

import {createMuiTheme} from '@material-ui/core/styles'

const theme = createMuiTheme({
    palette: {
        primary: ...
        secondary: ...
    },
    // ...
}

export default theme

^{See Theming - Material-UI.}

См. API компонентов высшего порядка.

30.06.2020 01:15