如何在Material UI中设置选中状态下FormControlLabel的背景色？

你之前的代码仅给Radio组件添加了选中时的背景色，因为.Mui-checked类是作用在Radio元素上的，而非FormControlLabel。要给整个FormControlLabel设置选中背景，需要结合RadioGroup的选中状态来动态判断并设置样式。

以下是两种可行方案：

方案一：利用受控状态动态设置sx样式 #

如果你的RadioGroup是受控组件（通过value和onChange管理选中状态），可以直接在FormControlLabel的sx属性中判断当前项是否被选中，从而设置背景色：

import { RadioGroup, FormControlLabel, Radio } from '@mui/material';
import { useState } from 'react';

// 示例选项数据
const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
];

export default function CustomRadioGroup() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <RadioGroup value={selectedValue} onChange={handleChange}>
      {options.map((obj) => (
        <FormControlLabel
          key={obj.value}
          value={obj.value}
          control={<Radio />}
          label={obj.label}
          sx={{
            // 根据选中状态切换背景色
            backgroundColor: selectedValue === obj.value ? 'black' : 'transparent',
            color: selectedValue === obj.value ? 'white' : 'inherit', // 可选：切换文字颜色适配背景
            padding: '8px 12px',
            borderRadius: '6px',
            cursor: 'pointer',
            transition: 'background-color 0.2s ease',
            // 可选：添加hover效果
            '&:hover': {
              backgroundColor: selectedValue === obj.value 
                ? 'black' 
                : 'rgba(0, 0, 0, 0.05)',
            },
          }}
        />
      ))}
    </RadioGroup>
  );
}

方案二：使用styled组件封装（更适合全局复用） #

如果需要在多个地方复用这个样式，可以用styled创建自定义的FormControlLabel组件：

import { styled } from '@mui/material/styles';
import { FormControlLabel as MuiFormControlLabel } from '@mui/material';

const FormControlLabel = styled(MuiFormControlLabel)(({ theme, selected }) => ({
  backgroundColor: selected ? 'black' : 'transparent',
  color: selected ? 'white' : 'inherit',
  padding: '8px 12px',
  borderRadius: '6px',
  transition: 'background-color 0.2s ease',
  '&:hover': {
    backgroundColor: selected ? 'black' : 'rgba(0, 0, 0, 0.05)',
  },
}));

// 使用时传入selected属性
<FormControlLabel
  key={obj.value}
  value={obj.value}
  control={<Radio />}
  label={obj.label}
  selected={selectedValue === obj.value}
/>

关键说明 #

• FormControlLabel本身没有自带的选中状态类，必须通过RadioGroup的受控状态来判断当前项是否被选中。
• 添加padding和border-radius可以让背景区域更贴合标签内容，提升视觉效果。
• 可选修改文字颜色，确保在深色背景下文字清晰可见。

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