Reactjs 警告：失败的道具类型：道具'theme'在'MuiThemeProviderOld'中标记为必需，但其值为'undefined'`

我正在尝试将材质ui添加到提供程序中 我就是这样做的，但它不起作用。在尝试控制台log CreateMuiteme时，它会提供所有数据，但不会连接到MuiThemProvider

这就是错误所在

警告：失败的道具类型：道具

主题

在

MuiThemeProviderOld

中标记为所需，但其值为

未定义

这是我的密码

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

import {Link} from 'react-router-dom';
import { green } from '@material-ui/core/colors';

const theme = createMuiTheme({
  pallete: {
     primary: {
      "50": "#21412a",
      "100": "#21412a",
      "200": "#21412a",
      "300": "#21412a",
      "400": "#21412a",
      "500": "#21412a",
      "600": "#21412a",
      "700": "#21412a",
      "800": "#21412a",
      "900": "#21412a",
      "A100": "#21412a",
      "A200": "#21412a",
      "A400": "#21412a",
      "A700": "#21412a",
      "contrastDefaultColor": "light"
    }

  },
})
console.log(theme);

const drawerWidth = 240;

const styles = theme => ({

  link: {
    textDecoration: 'none'
  },
  root: {
    display: 'flex',
  },
  appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 20,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: '0 8px',
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
});

class Layout extends React.Component {
  state = {
    open: false,
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { classes, theme } = this.props;
    const { open } = this.state;

    return (
      <MuiThemeProvider theme={theme}>
        <div className={classes.root}>
          <CssBaseline />
          <AppBar
            position="fixed"
            className={classNames(classes.appBar, {
              [classes.appBarShift]: open,
            })}
          >
            <Toolbar disableGutters={!open}>
              <IconButton
                color="inherit"
                aria-label="Open drawer"
                onClick={this.handleDrawerOpen}
                className={classNames(classes.menuButton, open && classes.hide)}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="h6" color="inherit" noWrap>
                Persistent drawer
              </Typography>
            </Toolbar>
          </AppBar>
          <Drawer
            className={classes.drawer}
            variant="persistent"
            anchor="left"
            open={open}
            classes={{
              paper: classes.drawerPaper,
            }}
          >
            <div className={classes.drawerHeader}>
              <IconButton onClick={this.handleDrawerClose}>
                <ChevronLeftIcon />
              </IconButton>
            </div>
            <Divider />
            <List>
              <Link to="/" className = {classes.link}>
                <ListItem button>
                  <ListItemText primary='Home'/>
                </ListItem>
              </Link>
              <Divider/>
              <Link to='/categories' className={classes.link}>
                <ListItem button>
                  <ListItemText primary='Categories'/>
                </ListItem>
              </Link>
            </List>
          </Drawer>
          <main
            className={classNames(classes.content, {
              [classes.contentShift]: open,
            })}
          >
            <div className={classes.drawerHeader} />
            {this.props.children}
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}


export default withStyles(styles)(Layout);

从“React”导入React；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“@material ui/core/styles”导入{withStyles，MuiThemeProvider，createMuiTheme}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
从'react router dom'导入{Link}；
从'@material ui/core/colors'导入{green}；
const theme=createMuiTheme({
托盘：{
主要：{
“50”：“21412a”，
“100”：“21412a”，
“200”：“21412a”，
“300”：“21412a”，
“400”：“21412a”，
“500”：“21412a”，
“600”：“21412a”，
“700”：“21412a”，
“800”：“21412a”，
“900”：“21412a”，
“A100”：“21412a”，
“A200”：“21412a”，
“A400”：“21412a”，
“A700”：“21412a”，
“对比度默认颜色”：“光”
}
},
})
console.log（主题）；
常数抽屉宽度=240；
常量样式=主题=>({
链接：{
text装饰：“无”
},
根目录：{
显示：“flex”，
},
appBar：{
transition:theme.transitions.create（['margin'，'width']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
},
appBarShift：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
transition:theme.transitions.create（['margin'，'width']{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen，
}),
},
菜单按钮：{
marginLeft:12，
marginRight:20，
},
隐藏：{
显示：“无”，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
抽屉阅读器：{
显示：“flex”，
对齐项目：“居中”，
填充：“0 8px”，
…theme.mixins.toolbar，
justifyContent:“柔性端”，
},
内容：{
flexGrow:1，
填充：theme.space.unit*3，
过渡：theme.transitions.create（'margin'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
边缘左侧：-抽屉宽度，
},
contentShift：{
过渡：theme.transitions.create（'margin'{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen，
}),
marginLeft:0，
},
});
类布局扩展了React.Component{
状态={
开：错，
};
手持绘图笔=（）=>{
this.setState（{open:true}）；
};
handleDrawerClose=（）=>{
this.setState（{open:false}）；
};
render（）{
const{classes，theme}=this.props；
const{open}=this.state；
返回(
持久抽屉
{this.props.children}
);
}
}
导出默认样式（样式）（布局）；

渲染方法的第一行应更改为：

const { classes, theme } = this.props;

致：

---

当前，

渲染

中的附加

主题

变量声明正在将上面设置的

主题

变量隐藏到

createMuiTheme
的结果中。您正在从道具读取主题，而我认为您需要从createMuiTheme读取主题，您可以用不同的名称命名它，并使用same@ShubhamKhatri我尝试更改名称，但仍然保持不变。@adityakumar尝试将主题作为
this.theme
放置在构造函数中，并将其作为
theme={this.theme}
传递给组件。行为是否保持不变？我也尝试过，我不知道为什么它仍然不起作用。请共享一个代码沙盒或类似的复制问题。虽然我对它做了一些修改。我删除了主页上的一些graphql内容，这样我就不会有它试图影响后端方面的噪音，而这些方面对我来说是不存在的。我做了一个样式更改，以确保主题能够通过（menuButton css类）。我没有看到任何与MuiThemeProvider相关的错误。它似乎工作得很好。
const { classes} = this.props;