困ったこと
Stack APIのchildrenの要素間にmarginを与える方法としてspacing propsがあります。
今日開発していて、spacing propsを利用してもmarginが当たらずに困ってしまいました。
具体的には文字列とボタンの間に余白を入れたかったのですが、うまくいきませんでした。
- コード
<Stack spacing={2}>
文字列
<Button>
ボタン
</Button>
</Stack>
-
画面表示
-
spacing propsの説明
解決策
Stack APIはspacing propsにてDOM要素の要素間にmarginを入れる場合、その要素が全てDOM要素でなければならないようです。
先ほどのコードの文字列はNodeであり、DOM要素になっていないので、pタグ(MUIではTypography API)などで囲ってあげる必要があるようです。
<Stack spacing={2}>
<Typography>文字列</Typography>
<Button>
ボタン
</Button>
</Stack>
- 画面表示
解決しました！めでたしめでたし！
Discussion