如何在MUI单选按钮中用CheckCircleSharpIcon替换圆点图标

实现步骤： #

• 先导入CheckCircleSharpIcon组件
• 通过Radio组件的icon（未选中状态）和checkedIcon（选中状态）属性，替换默认圆点图标

修改后的完整代码： #

// 导入所需图标
import CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp';

{res?.map((radiooption, index) => (
  <RadioGroup
    aria-labelledby="demo-radio-buttons-group-label"
    name="radio-buttons-group"
    className={classes.radioGroup}
    value={value}
    onChange={handleChange}
    key={radiooption.secondaryRadioName}
  >
    <FormControlLabel 
      className={classes.radioButton} 
      value={radiooption?.secondaryRadioName} 
      control={
        <Radio 
          // 未选中状态图标，可自定义颜色、大小
          icon={<CheckCircleSharpIcon sx={{ color: '#ccc', fontSize: 20 }} />}
          // 选中状态图标，使用主题主色示例
          checkedIcon={<CheckCircleSharpIcon sx={{ color: '#1976d2', fontSize: 20 }} />}
        />
      } 
      label={<span dangerouslySetInnerHTML={{ __html: radiooption?.secondaryRadioName }}/>} 
    />
  </RadioGroup>
))}

关键说明： #

• icon对应单选按钮未选中时的显示样式，示例用灰色缩小版图标，可按需调整
• checkedIcon对应选中时的显示样式，示例用MUI默认主色，支持通过sx或className自定义样式
• 原代码中的空标签<></>可移除，RadioGroup本身作为容器组件可直接承载FormControlLabel

内容的提问来源于stack exchange，提问作者Arun Krishna