fix: 修复更新到 mui-v5 后，菜单折叠失效的问题。

src/layouts/default.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from "react";
 import clsx from "clsx";
-import { useTheme, Theme } from "@mui/material/styles";
+import { useTheme, Theme, CSSObject, styled } from "@mui/material/styles";
-import createStyles from '@mui/styles/createStyles';
+import createStyles from "@mui/styles/createStyles";
-import makeStyles from '@mui/styles/makeStyles';
+import makeStyles from "@mui/styles/makeStyles";
 import Drawer from "@mui/material/Drawer";
-import AppBar from "@mui/material/AppBar";
+import AppBar, { AppBarProps } from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import List from "@mui/material/List";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -17,76 +17,83 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItem from "@mui/material/ListItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import { AddCircle, Description, LocalOffer } from '@mui/icons-material';
+import { AddCircle, Description, LocalOffer } from "@mui/icons-material";
-import { Link } from '@curi/react-dom';
+import { Link } from "@curi/react-dom";
+import { Box } from "@mui/system";
 const drawerWidth = 240;
 
-const useStyles = makeStyles((theme: Theme) =>
+const openedMixin = (theme: Theme): CSSObject => ({
-  createStyles({
-    root: {
-      display: "flex",
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    hide: {
-      display: "none",
-    },
-    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,
   }),
-    },
+  overflowX: "hidden",
-    drawerClose: {
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
   transition: theme.transitions.create("width", {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
   overflowX: "hidden",
-      width: theme.spacing(7) + 1,
+  width: `calc(${theme.spacing(7)} + 1px)`,
-      [theme.breakpoints.up("sm")]: {
+});
-        width: theme.spacing(9) + 1,
+
-      },
+const DrawerHeader = styled("div")(({ theme }) => ({
-    },
-    toolbar: {
   display: "flex",
   alignItems: "center",
   justifyContent: "flex-end",
   padding: theme.spacing(0, 1),
   // necessary for content to be below app bar
   ...theme.mixins.toolbar,
-    },
+}));
-    content: {
-      flexGrow: 1,
-      padding: theme.spacing(3),
-    },
-  })
-);
 
-export const DefaultLayout: FC = ({children}) => {
+const Main = styled("main")(({ theme }) => ({
-  const classes = useStyles();
+  padding: theme.spacing(2, 2),
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(4, 3),
+  },
+  width: "100%",
+  marginTop: theme.mixins.toolbar.minHeight,
+}));
+
+const StyledAppBar = styled(AppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps & { open?: boolean }>(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const StyledDrawer = styled(Drawer, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme),
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme),
+  }),
+}));
+
+export const DefaultLayout: FC = ({ children }) => {
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -99,45 +106,30 @@ export const DefaultLayout: FC = ({children}) => {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ display: "flex" }}>
       <CssBaseline />
-        <AppBar
+      <StyledAppBar position="fixed" open={open}>
-          position="fixed"
-          className={clsx(classes.appBar, {
-            [classes.appBarShift]: open,
-          })}
-        >
         <Toolbar>
           <IconButton
             color="inherit"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
-              className={clsx(classes.menuButton, {
+            sx={{
-                [classes.hide]: open,
+              marginRight: "36px",
-              })}
+              ...(open && { display: "none" }),
-              size="large">
+            }}
+            size="large"
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" noWrap>
             Mini variant drawer
           </Typography>
         </Toolbar>
-        </AppBar>
+      </StyledAppBar>
-        <Drawer
+      <StyledDrawer variant="permanent" open={open}>
-          variant="permanent"
+        <DrawerHeader>
-          className={clsx(classes.drawer, {
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open,
-          })}
-          classes={{
-            paper: clsx({
-              [classes.drawerOpen]: open,
-              [classes.drawerClose]: !open,
-            }),
-          }}
-        >
-          <div className={classes.toolbar}>
           <IconButton onClick={handleDrawerClose} size="large">
             {theme.direction === "rtl" ? (
               <ChevronRightIcon />
@@ -145,7 +137,7 @@ export const DefaultLayout: FC = ({children}) => {
               <ChevronLeftIcon />
             )}
           </IconButton>
-          </div>
+        </DrawerHeader>
         <Divider />
         <List>
           <Link name="create-article">
@@ -174,11 +166,8 @@ export const DefaultLayout: FC = ({children}) => {
           </Link>
         </List>
         <Divider />
-        </Drawer>
+      </StyledDrawer>
-        <main className={classes.content}>
+      <Main>{children}</Main>
-          <div className={classes.toolbar} />
+    </Box>
-          { children }
-        </main>
-    </div>
   );
-}
+};