##背景

ResponsiveデザインはGridシステムを利用すれば簡単にできる。

ただ、Responsiveしつつ、PC画面ではデフォルトで表示するエリアをMobileではデフォルトで表示せず、ボタンなどのトリガーで表示させたいと思った。結果的に、ロジックは難しくないが、頭の回転が遅くて考えるのに時間がちょっとかかった。

##対策

page.js

<Grid item xs={12} sm={4}>
   <Box sx={{
      display: { xs: 'block', sm: 'none' },
   }}>
    
     <Button color="secondary" onClick={() => this.showform(this.state.xsState)}>Show/Hide Image Upload Form</Button>
                                
   </Box>
   <Box sx={{ display: { xs: `${this.state.xsState}`, sm: 'block' } }}>
       <UploadForm />
   </Box>
</Grid>

Boxのxsの値を動的に変更します。

page.js

    showform = (currentState) => {
        if (currentState == 'none'){
            this.setState({ xsState: 'block'})
        } else {
            this.setState({ xsState: 'none'})
        }
    }

はい、簡単でした。