Material UI (v5) でボタンを右揃えで表示する

こんにちは。地図パズル製作所の都島です！

今日は久しぶりに React のことを書こうと思います。最近 Material UI (v5) を使ってウェブサイトを構築しているのですが、ボタンを右揃えで表示するのに少し手間取ったので、記事にしました！

Stack を使う方法、Box を使う方法、Grid を使う方法が思いついたので、全部まとめて紹介しますね！

こんな感じです。

import { Box, Button, Grid, Stack } from "@mui/material";

function SamplePage() {
  return (
    <>
      <Stack my={2} direction="row" justifyContent="end" spacing={1}>
        <Button>ボタン1</Button>
        <Button>ボタン2</Button>
      </Stack>
      <Box my={2} flexDirection="row" justifyContent="flex-end" display="flex">
        <Box>
          <Button>ボタン1</Button>
        </Box>
        <Box ml={1}>
          <Button>ボタン2</Button>
        </Box>
      </Box>
      <Grid my={2} justifyContent="end" spacing={1} container>
        <Grid item>
          <Button>ボタン1</Button>
        </Grid>
        <Grid item>
          <Button>ボタン2</Button>
        </Grid>
      </Grid>
    </>
  );
}

export default LoginPage;

このように表示されます！

ということで、必要な方、ライセンスフリーでご自由にお使いください。

最後にいつも通り地図パズル製作所の紹介をします！地図パズル製作所では、子供も大人も楽しめる地図パズルを公開しています。ぜひ一度遊んでみてください！！

https://chizu-puzzle.com