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

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

javascript reactjs

Javascript 如何设置标头zIndex？获取以下错误：无法读取属性'；zIndex'；未定义的,javascript,reactjs,Javascript,Reactjs,我试图通过更改抽屉组件的z索引将其保留在标题内，但无法这样做，因为我遇到了错误：无法读取未定义的属性“zIndex” 有人能告诉我哪里出了问题吗 import React, { Component } from "react"; import PropTypes from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import AppBar from "@materia

我试图通过更改抽屉组件的z索引将其保留在标题内，但无法这样做，因为我遇到了错误：无法读取未定义的属性“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;

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
常数抽屉宽度=240；
常量样式=主题=>({
根目录：{
显示：“flex”，
为内容辩护：“之间的空间”
},
appBar：{
zIndex:theme.zIndex.drawer+1，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
工具栏：theme.mixins.toolbar，
});
类头扩展组件{
render（）{
返回(
新闻
登录
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
);
}
}
导出默认标题；

我试图将appbar的zindex设置为大于抽屉z索引，但它不起作用

代码的问题是，在完全实例化styles对象之前，您无法访问它。您可能想做的是使

styles

成为一个函数，该函数将主题作为参数并返回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,

});

然后导出

标题

组件，方法是使用

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

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
常数抽屉宽度=240；
常量样式=主题=>({
根目录：{
显示：“flex”，
为内容辩护：“之间的空间”
},
appBar：{
zIndex:theme.zIndex.drawer+1，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
工具栏：theme.mixins.toolbar，
});
类头扩展组件{
render（）{
const{classes}=this.props；
返回(
新闻
登录
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
);
}
}
导出默认样式（样式）（标题）；

请注意，使用

withStyles

包装器传递到组件的这些样式是通过

类

道具访问的。然后，您可以使用

className

属性为组件设置样式。

您的

样式

是

未定义的

此处：

zIndex:style.zIndex.drawer+1，

即使我定义了它们，z-index索引在appbar组件中也不起作用。请查找更新的代码。即使是'withStyles（styles）（Header）'无法设置z索引