使用 Framer Motion 时保持固定侧边栏

Question

我正在尝试使用 Material UI (React) 的 Framer Motion。我想要一个固定的侧边栏抽屉，它最初从左边进来。下面没有motion.div的代码会产生一个固定的侧边栏（我想要的最终结果）。但是，如果我从 Framer Motion 添加motion.div，则侧边栏将不再可见。这似乎是因为高度以某种方式设置为 0。但是，如果我手动将高度设置为 100%，侧边栏可见但不再固定（滚动内容）。有没有办法来解决这个问题？这是我抽屉的代码：

const drawerWidth = 300;

const useStyles = makeStyles((theme) => ({
  root: { flexGrow: 1 },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
    backgroundColor: "#fff",
  },
  drawerContainer: {
    overflow: "auto",
  },
}));

function Drawers() {
  const classes = useStyles();
  const theme = useTheme();

  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const drawer = (
    <div className={classes.drawerContainer}>
      <Grid container direction="column">
        <Grid item style={{ padding: "1rem", paddingTop: "2rem" }}>
          <img src="/logo.png" alt="image" />
        </Grid>
        <Hidden mdUp>
          <Grid item style={{ paddingLeft: "1rem" }}>
            <SmallMenu />
          </Grid>
        </Hidden>
        <Grid item style={{ marginTop: "3rem" }}>
          <div className={classes.toolbar} />
          <List color="primary">
            {["Home", "FAQ"].map(
              (text) => (
                <Link
                  to={`/${text.toLowerCase()}`}
                  style={{ textDecoration: "none", color: "black" }}
                  key={text}
                >
                  <ListItem button key={text}>
                    <ListItemText
                      primary={
                        <Typography
                          variant="body1"
                          style={{ fontSize: "1.5rem" }}
                        >
                          {text}
                        </Typography>
                      }
                    />
                  </ListItem>
                </Link>
              )
            )}
          </List>
        </Grid>
      </Grid>
    </div>
  );

  return (
    <div className={classes.root}>
      <motion.div
        initial={{ x: "-100vh" }}
        animate={{ x: 0 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.6 }}
        key="drawer"
      >
        <Hidden smUp>
          <AppBar position="fixed">
            <Toolbar>
              <IconButton
                onClick={handleDrawerToggle}
                edge="start"
                color="inherit"
                aria-label="menu"
              >
                <MenuIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <Drawer
            variant="temporary"
            anchor="left"
            className={classes.drawer}
            classes={{
              paper: classes.drawerPaper,
            }}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{ keepMounted: true }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown>
          <Drawer
            variant="permanent"
            anchor="left"
            className={classes.drawer}
            classes={{
              paper: classes.drawerPaper,
            }}
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </motion.div>
    </div>
  );
}