使用Material UI的RadioGroup时选中单选按钮图标消失如何解决？

• 优先排查自定义样式冲突：打开浏览器开发者工具，选中消失的单选框元素，查看Mui-checked状态对应的样式是否被自定义CSS（比如代码中的classes.card对应的后代选择器）设置了display: none、opacity: 0或visibility: hidden属性，找到冲突样式后调整选择器优先级或者删除错误配置即可。
• 排查不到冲突的情况下可以给Radio组件加兜底样式，强制保留选中态展示：

<Radio 
  sx={{
    '&.Mui-checked': {
      display: 'inline-flex !important',
      opacity: 1 !important
    }
  }}
/>

• 检查全局MUI主题配置：如果项目通过createTheme自定义了全局主题，查看是否有components.MuiRadio.styleOverrides相关配置，删除错误的选中态样式覆盖即可。
• 若为默认图标加载异常，可以显式指定选中/未选中图标，避免默认图标丢失：

// 先导入图标依赖
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';

// 替换原有Radio组件定义
<Radio
  icon={<RadioButtonUncheckedIcon />}
  checkedIcon={<RadioButtonCheckedIcon />}
/>

内容的提问来源于stack exchange，提问作者Santosh Sharma