Question

我正在尝试添加Material ui ThemeProvider 这是我这样做的方法，但是不起作用。在尝试控制台日志createMuiTheme时，它会提供所有数据，但不会与MuiThemProvider挂钩。

这是错误

警告：道具类型失败：道具theme在MuiThemeProviderOld中标记为必需，但是其值为undefined。

这是我的代码。

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);

Answer 1

您的render方法的第一行应更改为：

const { classes, theme } = this.props;

收件人：

const { classes} = this.props;

当前，theme内的附加render变量声明会将上面设置的theme变量隐藏到createMuiTheme的结果中。

警告：道具类型失败：道具“ theme”在“ MuiThemeProviderOld”中标记为必需，但其值为“ undefined”

1 个答案: