如何设置MUI Radio Button选中状态下的标签样式

核心实现逻辑利用MUI组件自带的状态类：单选按钮选中时，外层FormControlLabel根节点会自动挂载Mui-checked类名，直接通过sx属性针对该状态下的标签节点设置蓝色样式即可，无需额外维护选中状态。

修改后可直接运行的完整代码 #

import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";

export default function RowRadioButtonsGroup({label1, label2}) {
  return (
    <FormControl>
      <RadioGroup
        row
        aria-labelledby="demo-row-radio-buttons-group-label"
        name="row-radio-buttons-group"
        style={{display: 'flex', gap: '2rem'}}
        sx={{
          '& .MuiSvgIcon-root': {
            fontSize: 28, 
          },
          // 选中状态下标签文字样式
          '& .MuiFormControlLabel-root.Mui-checked .MuiFormControlLabel-label': {
            color: '#1976d2', // 可替换为你需要的任意蓝色色值
            fontWeight: 500 // 可选配置：选中时文字加粗，和参考效果匹配度更高
          }
        }}
      >
        <FormControlLabel value="Sunday" control={<Radio />} label={label1}/>
        <FormControlLabel value="Monday" control={<Radio />} label={label2} />
      </RadioGroup>
    </FormControl>
  );
}

补充说明 #

• 色值可根据需求自行调整，比如使用blue、#2563eb等合法CSS颜色值都可以
• 样式写在RadioGroup的sx属性中会对组内所有单选项生效，如果只需要给特定选项加效果，把对应样式规则写到目标FormControlLabel的sx属性即可
• 该实现完全依赖MUI内置状态机制，不需要额外编写状态监听逻辑，切换选中时样式会自动同步

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