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，但是它不起作用

Answer 1

代码的问题是，在完全实例化样式对象之前，您无法访问它。您可能想要做的是使Variable2一个以 theme 为参数并返回样式对象的函数，如下所示：

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包装器传递给组件的样式是通过classes道具访问的。然后，您可以使用className属性为组件设置样式。

如何设置标头zIndex？得到以下错误：无法读取未定义的属性'zIndex'

1 个答案: