我正在尝试复制 MUI Drawer 页面上的“迷你抽屉”示例：
https://mui.com/components/drawers/#mini-variant-drawer
但是一旦我将它包装在 ThemeProvider 中，即使引用的主题为空，布局也会中断。见下文：
<ThemeProvider theme={baseTheme}>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: "36px",
...(open && { display: "none" })
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Mini variant drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</DrawerHeader>
<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>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<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>
</Box>
</Box>
</ThemeProvider>
（注意：此代码是网站上迷你抽屉示例的精确副本）
看起来 ThemeProvider 使抽屉和主体重叠而不是相互“推”。删除 ThemeProvider（并回到 MUI 网站上的示例设置方式）立即修复它。
当然，在我的实际用例中，我想要一个浅色和深色主题，但似乎即使是没有任何设置的单个主题也会破坏代码。
这是一个 CodeSandbox，显示了 App.js 和 theme.js 是如何设置的：
https://codesandbox.io/s/react-mui-theme-breaks-drawer-u5sg0
这是 MUI 中的错误还是我做错了主题？
预先感谢您的帮助。