无法使标签与Material-ui抽屉响应

Question

我已经使用Material-UI启动了一个应用程序，正在使用应用程序栏，抽屉和抽屉的主要内容区域，我希望有一个容器来呈现我的应用程序页面/组件。

在这个区域上，我想使用带标签的纸张，当它呈现时具有完整的宽度，但是如果我打开抽屉，它仍然具有相同的尺寸并生成滚动条...我希望它能够响应抽屉打开后，它将自动调整宽度大小...

这是我有我的项目的git的链接 https://github.com/billpereira/MaintApp

我要响应/调整大小的组件是src / Container

我在src / Layout / index：useStyles.content内部使用了width：100vh并试图在contentShift上强制设置一些大小，但是使用auto时，在打开抽屉的情况下它不会占用全角

const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        // width:'100vw',
    },
    appBar: {
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen
        })
    },
  title: {
    flexGrow: 1,
  },
    appBarShift: {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: drawerWidth,
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen
        })
    },
    menuButton: {
        marginRight: theme.spacing(2)
    },
    hide: {
        display: 'none'
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0
    },
    drawerPaper: {
        width: drawerWidth
    },
    drawerHeader: {
        display: 'flex',
        alignItems: 'center',
        padding: '0 8px',
        ...theme.mixins.toolbar,
        justifyContent: 'flex-end'
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen
        }),
        marginLeft: -drawerWidth,
        width: '100vw',
    },
    contentShift: {
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen
        }),
        marginLeft: 0,
    }
}));