🛎️

ReactPWAでMUIのRadioGroup使うとラベルが表示されない問題の解決法

2024/04/19に公開

問題

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