Material-UIで横並びにするときはStackが簡単そう

2023年1月19日

今までMaterial-UIを使って横並びにするためにGridを使ってた。

こんな感じ。

<Grid>
   <Grid item xs={1}>...</Grid>
   <Grid item xs={1}>...</Grid>
</Grid>

これでもいいんですけど、Stackというものがあるのを知ってしまった。
個人的にStackのほうが好み。

<Stack direction="row" spacing={1}>
    <Paper>横並び</Paper>
    <Paper>にしたい</Paper>
</Stack>

Paper使ってるので浮いた感じのスタイルになってますが、不要なときはelevation={0}を付けるとよい。

<Stack direction="row" spacing={1}>
    <Paper elevation={0}>横並び</Paper>
    <Paper elevation={0}>にしたい</Paper>
</Stack>

複雑な段組みでもないかぎり、Stackを使ったほうが簡単そう。

てきとうにいろいろプログラミング

Posted by boku