javascript - Cómo estilizar la etiqueta en un botón de radio MUI cuando está seleccionado

Buen día a todos, estoy intentando aplicar estilo al texto de la etiqueta en el botón de radio para que cambie a color azul cuando esté seleccionado.

ESTE ES MI CÓDIGO DEL BOTÓN MUI HASTA AHORA

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, 
    },
    
  }}
      >
        <FormControlLabel value="Sunday" control={<Radio />} label={label1}/>
        <FormControlLabel value="Monday" control={<Radio />} label={label2} />
      </RadioGroup>
    </FormControl>
  );
}

Respuesta #1

Básicamente, solo crea una etiqueta de control de formulario con estilo y usa el hook "useRadioGroup" para el botón y elige los colores para activado y desactivado https://codesandbox.io/s/radiobuttonsgroup-demo-material-ui-forked-pix9rg?file=/demo.js

// Custom label

const StyledFormControlLabel = styled((props) => (
    <FormControlLabel {...props} />
  ))(({ theme, checked }) => ({
    ".MuiFormControlLabel-label": checked && {
      // Change color here
      color: "red"
    }
  }));

// Custom FormControl
 
   function MyFormControlLabel(props) {
    // MUI UseRadio Group
    const radioGroup = useRadioGroup();

    let checked = false;

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

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



 

  <MyFormControlLabel value="female" control={<Radio />} label="Female" />