Estoy usando MUI v5. Creé un formulario para elegir luchadores, pero estoy atascado tratando de anular el color de la etiqueta del componente TimePicker. Todos los demás componentes de mi formulario tienen el color normal que quiero, pero no sé cómo cambiar el color del TimePicker.

El componente TimePicker no está enfocado en la imagen. Cuando selecciono los otros componentes del formulario, el color cambia a rojo, como debería, pero TimePicker permanece en rojo todo el tiempo enfocado o no.

He intentado cambiar los colores de mi tema, he usado

 inputProps={{ className: classes.input }}

dentro del componente y cambió con éxito el color del texto y el fondo del TimePicker, pero no puede encontrar el CSS adecuado para cambiar el color de la etiqueta.

En mi código, puede ver que intenté anular .root y .floatingLabelFocusStyle pero fue en vano.

 import { makeStyles, TextField } from "@material-ui/core"; import { LocalizationProvider, TimePicker } from "@mui/lab"; import AdapterDateFns from "@mui/lab/AdapterDateFns"; import { useState } from "react"; const useStyles = makeStyles((theme) => ({ input: { color: 'blue' }, floatingLabelFocusStyle: { }, root: { color: 'blue' } })); const GameTimePicker = ({ setFormGameTime, currentTime = '' }) => { const classes = useStyles(); const [gameTime, setGameTime] = useState(currentTime); const handleChange = (e, v) => { // console.log(v); setGameTime(v); setFormGameTime(v); } return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <TimePicker ampm={false} views={['minutes', 'seconds']} inputProps={{ className: classes.input }} color='success' inputFormat="mm:ss" mask="__:__" label="Time of fight/event" value={gameTime} onChange={handleChange} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> ) } export default GameTimePicker;

¿Alguna idea de cómo puedo anular este color?