Javascript 是否有方法显示嵌套在网格组件中的材质UI抽屉？

我正在使用MaterialUI创建一个web应用程序。主页分为3个网格，每个网格的高度

为
500px
。我想在中间的格子里显示一个抽屉，里面有一些操作选项。可能吗？到目前为止，我只能在整个屏幕上显示它

以下是我的主要组件和网格元素：

import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const style = {
    Paper: {
        padding: 10,
        marginTop: 5,
        marginBottom: 5,
        height: 500,
        overflowY: 'auto',
        position: 'relative',
    },
    Fab: {
        position: 'absolute',
        top: 5,
        left: 5
    },
}

export default () => {
    return (
        <Fragment>
            <Grid container spacing={1}>
                <Grid item xs={12} sm={4} md={4} lg={2}>
                    <Paper style={style.Paper}>

                    </Paper>
                </Grid>

                <Grid item xs={12} sm={8} md={8} lg={4}>
                    <Paper style={style.Paper}>
                        <ToolbarDrawer />
                    </Paper>
                </Grid>

                <Grid item xs={12} sm={12} md={12} lg={6}>
                    <Paper style={style.Paper}>

                    </Paper>
                </Grid>
            </Grid>
        </Fragment>
    );
}

import React，{Fragment}来自'React'；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
常量样式={
论文：{
填充：10，
玛金托普：5，
marginBottom:5，
身高：500，
溢出：“自动”，
位置：'相对'，
},
晶圆厂：{
位置：'绝对'，
前五名，
左：5
},
}
导出默认值（）=>{
返回(
);
}

这是我的抽屉组件，我希望它嵌套在中间网格中显示：

javascript

import React, { Fragment } from 'react';
import IconButton from '@material-ui/core/IconButton';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
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 List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(6) + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(7) + 1,
    },
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
  }
}));

export default () => {
    const classes = useStyles();

    const [open, setOpen] = React.useState(false);

    function handleToolbarClose() {
        setOpen(!open);
    }

    return (
            <Fragment>
                <CssBaseline />
                <Drawer
                    anchor="right"
                    variant="permanent"
                    className={clsx(classes.drawer, {
                      [classes.drawerOpen]: open,
                      [classes.drawerClose]: !open,
                    })}
                    classes={{
                      paper: clsx({
                        [classes.drawerOpen]: open,
                        [classes.drawerClose]: !open,
                      }),
                    }}
                    open={open}
                >
                    <div className={classes.toolbar}>
                      <IconButton onClick={handleToolbarClose}>
                        {(open) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                      </IconButton>
                    </div>
                    <Divider />
                    <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>

            </Fragment>
        )   
}

javascript
从“React”导入React，{Fragment}；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
从'@material ui/core/styles'导入{makeStyles}；
从“clsx”导入clsx；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/List”导入列表；
从“@material ui/core/CssBaseline”导入CssBaseline；
常数抽屉宽度=240；
const useStyles=makeStyles（主题=>({
出票人：{
宽度：抽屉宽度，
flexShrink:0，
空白：“nowrap”，
},
抽屉式绳索：{
宽度：抽屉宽度，
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen，
}),
},
抽屉式：{
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
溢出x:'隐藏'，
宽度：主题。间距（6）+1，
[theme.breakpoints.up（'sm'）：{
宽度：主题。间距（7）+1，
},
},
工具栏：{
显示：“flex”，
对齐项目：“居中”，
justifyContent:“柔性端”，
填充：主题。间距（0，1），
…theme.mixins.toolbar，
}
}));
导出默认值（）=>{
const classes=useStyles（）；
const[open，setOpen]=React.useState（false）；
函数handleToolbarClose（）{
setOpen（！open）；
}
返回(
{（打开）？：}
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
)   
}
看起来您必须为此构建一个临时抽屉组件。以下是一个您可以开始使用的示例：


MakeshiftDrawer
使用
列表
组件和
幻灯片
转换组件：

渲染：


export default function MakeshiftDrawer({ open }) {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  function handleListItemClick(event, index) {
    setSelectedIndex(index);
  }

  return (
    <Slide direction="right" in={open} mountOnEnter unmountOnExit>
      <div className={classes.root}>
        <List component="nav" aria-label="main mailbox folders">
          <ListItem
            button
            selected={selectedIndex === 0}
            onClick={event => handleListItemClick(event, 0)}
          >
            <ListItemIcon>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItem>
          <ListItem
            button
            selected={selectedIndex === 1}
            onClick={event => handleListItemClick(event, 1)}
          >
            <ListItemIcon>
              <DraftsIcon />
            </ListItemIcon>
            <ListItemText primary="Drafts" />
          </ListItem>
        </List>
        <Divider />
        <List component="nav" aria-label="secondary mailbox folder">
          <ListItem
            button
            selected={selectedIndex === 2}
            onClick={event => handleListItemClick(event, 2)}
          >
            <ListItemText primary="Trash" />
          </ListItem>
          <ListItem
            button
            selected={selectedIndex === 3}
            onClick={event => handleListItemClick(event, 3)}
          >
            <ListItemText primary="Spam" />
          </ListItem>
        </List>
      </div>
    </Slide>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(true);

  const toggle = () => {
    setIsOpen(!isOpen);
  }

  return (
    <div>
      <Grid container direction="row" style={topGridStyle}>
      </Grid>
      <Grid container direction="row" style={midGridStyle}>
        <Grid item>
          <Button variant="contained" color="primary" onClick={toggle}>Toggle</Button>
          <MakeshiftDrawer open={isOpen} />
        </Grid>
      </Grid>
      <Grid container direction="row" style={botGridStyle}>
      </Grid>
    </div>
  );
}