带有 react-router-dom 的 MUI Drawer 不激活过渡效果

Question

我想将像 MUI 网站中的示例那样的持久抽屉与 react-router-dom 结合起来。 我发现的唯一问题是过渡效果不再起作用，段落不会调整大小以为打开的抽屉腾出空间，因此后者最终会与文本重叠。 我已经设置了一个有效的 Codesandbox 示例

传递给路由页面的 open 道具似乎没有激活这里的转换：

const Main = styled(MScreen, { shouldForwardProp: (prop) => prop !== "open" })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    marginLeft: `-${drawerWidth}px`,
    ...(open && {
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
      marginLeft: 0
    })
  })
);

Answer 1

您需要为实际的 DOM 元素设置样式。

您可以通过将className属性传递给div元素来做到这一点：

主.js

import { styled } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Typography from "@mui/material/Typography";

const drawerWidth = 240;

const MScreen = ({ className }) => {
  return (
    <div className={className}> // <-- className prop passed through
      <CssBaseline />
      <Typography paragraph>
        ....
      </Typography>
      <Typography paragraph>
        ....
      </Typography>
    </div>
  );
};

const Main = styled(MScreen, { shouldForwardProp: (prop) => prop !== "open" })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    marginLeft: 0,
    ...(open && {
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
    })
  })
);
export default Main;

或者通过重构直接呈现样式化的main元素：

主.js

import { styled } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Typography from "@mui/material/Typography";

const drawerWidth = 240;

// Style a "main" HTML element
const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    marginLeft: 0,
    ...(open && {
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
    })
  })
);

const MScreen = ({ open }) => {
  return (
    <Main open={open}> // <-- pass open prop through to Main component
      <CssBaseline />
      <Typography paragraph>
        ....
      </Typography>
      <Typography paragraph>
        ...
      </Typography>
    </Main>
  );
};

export default MScreen; // <-- export MScreen content component

您还需要对Second组件应用类似的修复程序才能正确呈现。 我建议为“主要内容”区域创建一个布局路由，为路由呈现一个Outlet将其内容呈现到其中，这样您只需要在一个路由组件而不是所有组件中处理抽屉样式。