MUI v5でボタン内要素を左寄せまたは右寄せにする

javascript

mui

投稿日: 2024/06/20

更新日: 2024/06/26

MUI (旧 material-ui )の実用小ネタ集

以下のようなコードがあるとする。

<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <ArticleRoundedIcon
      sx={{
        color: nohColors.mauve,
      }}
    />
    記事を投稿する
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
    {"記事を投稿する(mini blog)"}
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <QuestionAnswerRoundedIcon sx={{ color: nohColors.pink }} />
    AIに質問する
  </Button>
</Stack>

テキストが中央にそろっていては見づらいです。

MUIでボタン内の要素が中央寄せになっている

こういったとき、ボタン要素の幅はそのままで文字だけを左に寄せたいとします。

以下のようにdirection="row"とwidth: "100%"を指定したStackコンポーネントを挟んであげるときれいにできます。

<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <ArticleRoundedIcon
        sx={{
          color: nohColors.mauve,
        }}
      />
      記事を投稿する
    </Stack>
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
      {"記事を投稿する(mini blog)"}
    </Stack>
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <QuestionAnswerRoundedIcon
        sx={{ color: nohColors.pink }}
      />
      AIに質問する
    </Stack>
  </Button>
</Stack>

MUIでボタン内の要素を左寄せにできている

右寄せにしたい場合はStackコンポーネントのjustifyContent="flex-end"を使用する。

<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <ArticleRoundedIcon
        sx={{
          color: nohColors.mauve,
        }}
      />
      記事を投稿する
    </Stack>
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
      {"記事を投稿する(mini blog)"}
    </Stack>
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <QuestionAnswerRoundedIcon
        sx={{ color: nohColors.pink }}
      />
      AIに質問する
    </Stack>
  </Button>
</Stack>

yosi

Noh を作ってるエンジニア。

Topへ戻る