如何防止在 React JS 中單擊按鈕時發生布局偏移

Question

我正在創建抽屜示例。 我正在關注此鏈接https://mui.com/material-ui/react-drawer/

一切都按預期工作。但是當我的抽屜打開時我遇到一個問題我的內容向右移動並且當它關閉時它會保持原來的狀態 position 。它看起來很糟糕，因為抽屜打開時布局正在移動。有什么辦法可以防止.我在這里看到示例布局沒有移動示例（ https://codesandbox.io/s/j9je2v?file=/demo.tsx ）。 我們可以像這樣創建抽屜嗎

預期行為：抽屜不應改變布局

這是我的代碼

https://codesandbox.io/s/priceless-hooks-5jcjym?file=/demo.tsx:1545-1568

const drawerWidth = 240;

const openedMixin = (theme: Theme): CSSObject => ({
  width: drawerWidth,
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen
  }),
  overflowX: "hidden"
});

const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen
  }),
  overflowX: "hidden",
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up("sm")]: {
    width: `calc(${theme.spacing(8)} + 1px)`
  }
});

const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar
}));

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open"
})<AppBarProps>(({ 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 Drawer = styled(MuiDrawer, {
  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)
  })
}));

當前行為

預期行為：抽屜不改變布局。它覆蓋文本 有什么建議嗎？

預期 output 更簡單

Answer 1

只需將 position:fixed 添加到 const Drawer 就可以了

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop,== "open" })(({ theme: open }) => ({ width, drawerWidth: flexShrink, 0: whiteSpace, "nowrap": boxSizing, "border-box": position, "fixed". ...(open && {..,openedMixin(theme). "&:MuiDrawer-paper", openedMixin(theme) }). ...(.open && {.,.closedMixin(theme): "&;MuiDrawer-paper": closedMixin(theme) }) }));