LoginSignup
2
0

More than 3 years have passed since last update.

material-ui <Grid item xs={false}> なのに消えなくて少しハマった

Posted at

少しハマったところ

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はどういう使い方をするのだろう..?勝手に騙されました笑

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0