Material-UI的Drawer组件覆盖页面内容，如何设置左侧flex布局避免遮挡？

• 你定义的包含display: flex的root样式类没有绑定到组件最外层的div元素上，flex布局未生效
• 页面主内容区域需要和Drawer放在同一flex容器下，才能自动避开Drawer宽度，不被遮挡

代码修改步骤 #

1. 修正SideBar组件代码 #

const drawerWidth = 240;

const SideBar = (props) => {
  const useStyles = makeStyles((theme) => ({
    root: { display: "flex" },
  }));
  const classes = useStyles();
  return (
    // 给最外层div绑定root样式类，启用flex布局
    <div className={classes.root}>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box",
          },
        }}
        variant="permanent"
        anchor="left"
      >
        <Toolbar />
        <List>
          <Divider />
          {props.jobs.map((job, i) => (
            <ListItem
              alignItems="flex-start"
              key={i}
              onClick={() => {
                props.onClick(job);
              }}
            >
              <ListItemText primary={job.title} secondary={job.career_level} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </div>
  );
}

2. 调整父组件布局 #

在引入SideBar的父组件中，将SideBar和你的页面主内容放在同一个flex容器内，给主内容区域设置flex: 1占满剩余宽度：

// 父组件示例代码
const App = () => {
  const useStyles = makeStyles((theme) => ({
    mainContent: {
      flexGrow: 1,
      padding: theme.spacing(3),
    }
  }))
  const classes = useStyles();
  return (
    <div style={{display: 'flex'}}>
      <SideBar jobs={你的任务列表数据} onClick={点击处理函数} />
      <main className={classes.mainContent}>
        {/* 这里放你的页面主内容 */}
        <Toolbar /> {/* 如果有顶部导航栏，加这个占位和Drawer的高度对齐 */}
        页面内容
      </main>
    </div>
  )
}

额外说明 #

如果你不想调整父组件布局，也可以直接给页面主内容区域设置paddingLeft: drawerWidth，效果和flex布局一致。

内容的提问来源于stack exchange，提问作者ahmad