Пользовательский интерфейс React Material: «тема» не определена no-undef - PullRequest
Новая
       10

Пользовательский интерфейс React Material: «тема» не определена no-undef

0 голосов
/ 25 марта 2020

Я создаю простое приложение реагирования с использованием material-ui. Я использую MuiThemeProvider и ThemeProvider для темы.

Приложение. js

import React from 'react';
import { createMuiTheme,  MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
import { Topic } from './dashboard/components/drawer/topic.js' 

const theme = createMuiTheme({
    palette : {
        type : 'dark',
        background : {
            default : "#000000"
        },
        secondary : {
            main : '#E19A4C'
        }
    }
})

function App() {
    return (
        < MuiThemeProvider theme={theme}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <div className="App">
                    <Dashboard />
                    <Topic />
                </div>
            </ThemeProvider>
        </ MuiThemeProvider>
    );
}

export default App;

Топи c. js

import React, { Component } from 'react';
import { Typography, makeStyles, Box, Paper } from '@material-ui/core';

const style = makeStyles(theme => ({
    paper : {
        background : '#ff00ff'
    }
}))

export const Topic = (props) => {

    const classes = style()

    return (
        <div>
            <Paper className={classes.box}>
                <Typography variant="h6" component="h6" gutterBottom>
                    {props.data}
                </Typography>
            </Paper>
        </div>
    )
}

export default Topic

Я получаю ошибку Uncaught ReferenceError: theme is not defined

Я пробовал {withTheme: true} в makeStyles, но это не работает.

Отправка темы как реквизита работает, но не рекомендуется. Может ли кто-нибудь помочь, пожалуйста?

1 Ответ

1 голос
/ 25 марта 2020

В вашем Topi c. js файле попробуйте использовать useTheme ловушку так: 

import React, { Component } from 'react';
import { Typography, makeStyles, Box, Paper } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';

const style = makeStyles(theme => ({
    paper : {
        background : '#ff00ff'
    }
}))

export const Topic = (props) => {

    const classes = style()
    const theme = useTheme();

    return (
        <div>
            <Paper className={classes.box}>
                <Typography variant="h6" component="h6" gutterBottom>
                    {props.data}
                </Typography>
            </Paper>
        </div>
    )
}

export default Topic

Теперь вы можете получить доступ к созданной вами теме в приложении. js из переменной темы (например, const theme )

...