少しハマったところ
material-ui のGridで、xsサイズよりも小さくなったら非表示にしたかった。
最初xs={0}と書いていて何も変わらず、ドキュメントを見に行って 0はダメで、falseの値が書いてあったので、それを使うのかな?って少し苦戦していました。
https://material-ui.com/api/grid/
<Grid container>
<Grid item xs={12} md={8}>
here is a main text ......
</Grid>
<Grid xs={false} md={4}>
ここをxsより小さい時は非表示にしたい
</Grid>
<Hidden smUp> pop up</Hidden>
</Grid>
このようにしてもうまく行きませんでした。
ドキュメントを見てもfalseは普通に存在してるしうーん..?となっていました。
解決
解決策は普通に検索していたら見つかりました。
https://material-ui.com/api/hidden/
<Grid container>
<Grid item xs={12} md={8}>
here is a main text ......
</Grid>
<Hidden xsDown>
<Grid md={4}>
これでxsより小さい時は非表示になる
</Grid>
</Hidden>
</Grid>
これで無事解決しました。
おそらく旧バージョン(?)の書き方を無意識にしていて、
xs={0} を試してもうまくいかないし..ってなって困っておりました
ドキュメントにあるfalseはどういう使い方をするのだろう..?勝手に騙されました笑