He echado un vistazo a otros hilos relacionados con esto, pero desafortunadamente no puedo cambiar el color rojo marcado predeterminado de la interfaz de usuario del material.
Aquí está mi código a continuación:
return ( <FormControl> <FormLabel>{label}</FormLabel> <RadioGroup row name={name} value={value} onChange={onChange} { items.map( item => ( <FormControlLabel key={item.id} value={item.id} control={<Radio />} label={item.title} /> ) ) } </RadioGroup> </FormControl> )Simplemente quiero poder cambiar el color de la radio marcada de rojo a azul.
He intentado lo siguiente pero no funcionó:
<Radio {...props} sx={{ '&, &.Mui-checked': { color: 'blue', }, }} />Debido a que usa 2 selectores: & y &.Mui-checked , sobrescribe el color de su casilla de verificación en un estado sin marcar. Por lo tanto, debe deshacerse de & y todo funcionará bien:
<Radio {...props} sx={{ color: "red", "&.Mui-checked": { color: "green" } }} />