如何使用“ material-ui”显示2个抽屉

Question

我正在使用“ material-ui” v4.0.0 Permanent Drawer right中的抽屉。一切正常，但是当我尝试在标签内添加另一个抽屉时，效果不佳。

我复制了包含单个抽屉代码的整个return（）代码，并将其粘贴到标记中。然后，将新的抽屉宽度定义为480，并将该样式用于第二个位于标签内部的抽屉。 但是，正在渲染第二个抽屉，但看不到更多，就像留下了空白，当我检查空白时，我可以看到div的div标签。

import React from 'react';
import './App.css';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
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 { ListItemText } from '@material-ui/core';

const drawerWidth: any = 240;
const drawerWidth2: any = 480;

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            display: 'flex',
        },
        appBar: {
            zIndex: theme.zIndex.drawer + 1,
        },
        drawer: {
            width: drawerWidth,
            flexShrink: 0,
        },
        drawerPaper: {
            width: drawerWidth,
        },
        content: {
            flexGrow: 1,
            padding: theme.spacing(3),
        },
        toolbar: theme.mixins.toolbar,
    }),
);

const useStyles2 = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            display: 'flex',
        },
        appBar: {
            zIndex: theme.zIndex.drawer + 1,
        },
        drawer: {
            width: drawerWidth2,
            flexShrink: 0,
        },
        drawerPaper: {
            width: drawerWidth2,
        },
        content: {
            flexGrow: 1,
            padding: theme.spacing(3),
        },
        toolbar: theme.mixins.toolbar,
    }),
);

const App: React.FC = () => {
    const classes = useStyles();
    const classes2 = useStyles2();

    return (
        <div className="App">

            <div className={classes.root}>
                <CssBaseline />
                <AppBar position="fixed" className={classes.appBar}>
                    <Toolbar>
                        <Typography variant="h6" noWrap>
                            Clipped drawer
          </Typography>
                    </Toolbar>
                </AppBar>
                <Drawer
                    className={classes.drawer}
                    variant="permanent"
                    classes={{
                        paper: classes.drawerPaper,
                    }}
                >
                    <div className={classes.toolbar} />
                    <List>
                        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                            <ListItem button key={text}>
                                <ListItemText primary={text} />
                            </ListItem>
                        ))}
                    </List>
                    <Divider />
                    <List>
                        {['All mail', 'Trash', 'Spam'].map((text, index) => (
                            <ListItem button key={text}>
                                <ListItemText primary={text} />
                            </ListItem>
                        ))}
                    </List>
                </Drawer>

                <main className={classes.content}>

                    <div className={classes2.root}>
                        <CssBaseline />
                        <AppBar position="fixed" className={classes2.appBar}>
                            <Toolbar>
                                <Typography variant="h6" noWrap>
                                    Clipped drawer
          </Typography>
                            </Toolbar>
                        </AppBar>
                        <Drawer
                            className={classes2.drawer}
                            variant="permanent"
                            classes={{
                                paper: classes2.drawerPaper,
                            }}
                        >
                            <div className={classes2.toolbar} />
                            <List>
                                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                                    <ListItem button key={text}>
                                        <ListItemText primary={text} />
                                    </ListItem>
                                ))}
                            </List>
                            <Divider />
                            <List>
                                {['All mail', 'Trash', 'Spam'].map((text, index) => (
                                    <ListItem button key={text}>
                                        <ListItemText primary={text} />
                                    </ListItem>
                                ))}
                            </List>
                        </Drawer>

                        <main className={classes2.content}>
                            <div className={classes2.toolbar} />
                            <Typography paragraph>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
                                facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
                                gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
                                donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
                                adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
                                Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
                                imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
                                arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
                                donec massa sapien faucibus et molestie ac.
        </Typography>
                            <Typography paragraph>
                                Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
                                facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
                                tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
                                consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
                                vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
                                hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
                                tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
                                nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
                                accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
                        </main>
                    </div>


                </main>
            </div>


        </div>
    );
}

export default App;

我想在内部抽屉中显示第二个抽屉，或者不显示在原始抽屉位置旁边。有什么办法解决吗？

我会很感激。