javascript - 如何设置标题 zIndex？出现以下错误：无法读取未定义的属性“zIndex”

Question

我试图通过更改它的 z-index 将我的抽屉组件保留在标题中，但由于我收到错误消息而无法这样做：无法读取未定义的属性“zIndex”

谁能让我知道我哪里出错了？

    import React, { Component } from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import AppBar from "@material-ui/core/AppBar";

    import Button from "@material-ui/core/Button";
    import IconButton from "@material-ui/core/IconButton";
    import MenuIcon from "@material-ui/icons/Menu";
    import Drawer from '@material-ui/core/Drawer';

    import CssBaseline from '@material-ui/core/CssBaseline';
    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 ListItem from '@material-ui/core/ListItem';
    import ListItemIcon from '@material-ui/core/ListItemIcon';
    import ListItemText from '@material-ui/core/ListItemText';
    import InboxIcon from '@material-ui/icons/MoveToInbox';
    import MailIcon from '@material-ui/icons/Mail';
    const drawerWidth = 240;
    const styles = theme => ({
  root: {
    display: "flex",
    justifyContent: "space-between"
  },
  appBar: {
    zIndex:theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width:  drawerWidth,
  },

 toolbar: theme.mixins.toolbar,
});

    class Header extends Component {
      render() {

        return (
          <div>
            <AppBar position="static" style={styles.appBar}>
              <Toolbar style={styles.root}>
                <Typography color="inherit"> NEWS</Typography>
                <Button color="inherit">LOGIN</Button>
                  </Toolbar>
                  <Drawer
            style={styles.drawer}
            variant="permanent"
            style={{
              paper: styles.drawerPaper,
            }}
          >
            <div style={styles.toolbar} />
            <List>
              {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                <ListItem button key={text}>
                  <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              ))}
            </List>
            <Divider />
            <List>
              {['All mail', 'Trash', 'Spam'].map((text, index) => (
                <ListItem button key={text}>
                  <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              ))}
            </List>
          </Drawer>
            </AppBar>

          </div>
        );
      }
    }

    export default Header;

我正在尝试将 appbar 的 zindex 设置为大于抽屉 z-index 但它不起作用

标签： javascriptreactjs

Answer 1

您的代码的问题是您无法访问样式对象，直到它完全实例化。您可能想要做的是创建styles一个将主题作为参数并返回样式对象的函数，如下所示：

 const styles = theme=>({
  root: {
    display: "flex",
    justifyContent: "space-between"
  },
  appBar: {
    zIndex:theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  toolbar: theme.mixins.toolbar,

});

Header然后通过使用withStyles组件包装器包装它并将您的样式传递给它来导出您的组件。

export default withStyles(styles)(Header);

这是完整的代码：

    import React, { Component } from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import AppBar from "@material-ui/core/AppBar";

    import Button from "@material-ui/core/Button";
    import IconButton from "@material-ui/core/IconButton";
    import MenuIcon from "@material-ui/icons/Menu";
    import Drawer from '@material-ui/core/Drawer';

    import CssBaseline from '@material-ui/core/CssBaseline';
    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 ListItem from '@material-ui/core/ListItem';
    import ListItemIcon from '@material-ui/core/ListItemIcon';
    import ListItemText from '@material-ui/core/ListItemText';
    import InboxIcon from '@material-ui/icons/MoveToInbox';
    import MailIcon from '@material-ui/icons/Mail';
    const drawerWidth = 240;
    const styles = theme => ({
       root: {
          display: "flex",
          justifyContent: "space-between"
       },
       appBar: {
           zIndex:theme.zIndex.drawer + 1,
       },
       drawer: {
          width: drawerWidth,
          flexShrink: 0,
       },
       drawerPaper: {
          width:  drawerWidth,
       },

       toolbar: theme.mixins.toolbar,
    });

    class Header extends Component {
      render() {
        const {classes} = this.props;
        return (
          <div>
            <AppBar position="static" className={classes.appBar}>
              <Toolbar className={classes.root}>
                <Typography color="inherit"> NEWS</Typography>
                <Button color="inherit">LOGIN</Button>
                  </Toolbar>
                  <Drawer
            className={classes.drawer}
            variant="permanent"
            style={{
              paper: styles.drawerPaper,
            }}
          >
            <div className={classes.toolbar} />
            <List>
              {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                <ListItem button key={text}>
                  <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              ))}
            </List>
            <Divider />
            <List>
              {['All mail', 'Trash', 'Spam'].map((text, index) => (
                <ListItem button key={text}>
                  <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              ))}
            </List>
          </Drawer>
            </AppBar>

          </div>
        );
      }
    }

    export default withStyles(styles)(Header);

请注意，使用withStyles包装器传递给组件的这些样式是通过classesprops 访问的。然后，您可以使用该className属性为组件设置样式。