css - 为什么此代码不在不同行而不是并排显示按钮？

Question

以下代码打印 Logo ，然后在下一行并排打印所有按钮。在第一<div>标签我试过放 block , inline-block ，并完全删除显示属性。还尝试删除 Box mui 标签。什么都不管用。我对 css 没有经验，可能犯了一个愚蠢的错误。它是一个 nextjs 元素。

import {makeStyles} from '@material-ui/core/styles';
import DashboardIcon from '@material-ui/icons/DashboardOutlined';
import ListingsIcon from '@material-ui/icons/Reorder';
import ScheduleIcon from '@material-ui/icons/EventNote';
import ProfileIcon from '@material-ui/icons/AccountCircleOutlined';
import SalesIcon from '@material-ui/icons/TrendingUp';
import BookingsIcon from '../../public/images/bookingsIcon.svg';
import Logo from '../mainLogo';
import Box from '@material-ui/core/Box';


const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

export default function SideNav() {
  const classes = useStyles();
  return (
    <Box>
      <Logo />
      <div display="block">
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<DashboardIcon />}
        >
          Dashboard
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ListingsIcon />}
        >
          Listings
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ScheduleIcon />}
        >
          Schedule
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<BookingsIcon />}
        >
          Bookings
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<SalesIcon />}
        >
          Sales & Analytics
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ProfileIcon />}
        >
          Profile
        </Button>
      </div>
    </Box>
  );
};

Answer 1

你能试试把 flex 放在 div 上，列的方向如下:

      <div style={{display:'flex', flexDirection:'column'}}>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<DashboardIcon />}
        >
          Dashboard
        </Button>
        ...
        ...
        ...
      </div>