MUI 実装Tips集

※随時更新していきます

要素を画面の真ん中に表示する

return (
  <Box
    display="flex"
    justifyContent="center"
    alignItems="center"
    sx={{width: "100%", height: "100%"}}
  >
    <Container sx={{
      width: "50%", 
      height: "50%", 
      background: "#999009"
    }}>
      <Typography>Center</Typography>
    </Container>
  </Box>
);

要素の横並び、縦並び

一列に場合は、Stackを使う。
横並びにしたい場合は、directionをrowに、縦並びの場合はcolumnを指定

  return (
      <Stack direction={"row"} spacing={2}>
        <Box sx={{ background: "#239999" }}>
          <Typography>Left</Typography>
        </Box>
        <Box sx={{ background: "#239999" }}>
          <Typography>Right</Typography>
        </Box>
      </Stack>
  );

  return (
      <Stack direction={"column"} spacing={2}>
        <Box sx={{ background: "#239999" }}>
          <Typography>Top</Typography>
        </Box>
        <Box sx={{ background: "#239999" }}>
          <Typography>Bottom</Typography>
        </Box>
      </Stack>
  );