🛎️
ReactPWAでMUIのRadioGroup使うとラベルが表示されない問題の解決法
問題
MUIのRadioGroup(https://mui.com/material-ui/react-radio-button/)を公式ドキュメント通りに実装すると、PWAで実装時にスマホでは表示されない
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
解決策
labelをTypograpyで挟んであげると無事スマホでも表示されました!
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label={<Typograpy>Female</Typograpy>}/>
<FormControlLabel value="male" control={<Radio />} label={<Typograpy>male</Typograpy>} />
<FormControlLabel value="other" control={<Radio />} label={<Typograpy>Other</Typograpy>} />
</RadioGroup>
</FormControl>
PWAで使用してるときだけ見えなかったので互換性の問題かなって思ってます
ラベルのスタイルをいじって、、みたいな人もいるみたいですけど、個人的にはTypoでくくった方が楽だし色々調整効くかなって思いました
Discussion