How do I set the background color of a FormControlLabel if it's selected in Material UI?

if I have a RadioGroup and want to make the background color of the checked radio button to another color, how do I do this in Material UI? Can't find anything in the documentation.

<FormControlLabel
  key={key}
  value={value}
  control={<Radio />}
  label={label}
/>

If I try the code below, only the radio button itself gets background color black, not the entire label.

<FormControlLabel
      key={obj.value}
      value={obj.value}
      control={
        <Radio
          sx={{
            '&.Mui-checked': {
              backgroundColor: 'black',
            },
          }}
        />
      }
      label={obj.label}
    />

Actually, I found some useful information in the docs.

By using the useRadioGroup() hook we get more control over the appearance of the radio group.

Inspired by an example from the documentation, I found this solution to your question.

Live demo:

Code:

import * as React from "react";
import RadioGroup, { useRadioGroup } from "@mui/material/RadioGroup";
import FormControlLabel, {
  FormControlLabelProps
} from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";

function MyFormControlLabel(props: FormControlLabelProps) {
  const radioGroup = useRadioGroup();

  let checked = false;

  if (radioGroup) {
    checked = radioGroup.value === props.value;
  }

  if (checked)
    return (
      <FormControlLabel
        sx={{
          backgroundColor: (theme) => theme.palette.primary.light
        }}
        checked={checked}
        {...props}
      />
    );

  return <FormControlLabel checked={checked} {...props} />;
}

export default function UseRadioGroup() {
  return (
    <RadioGroup name="use-radio-group" defaultValue="first">
      <MyFormControlLabel value="first" label="First" control={<Radio />} />
      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
    </RadioGroup>
  );
}