Tengo un problema al usar MUI DatePicker. No puedo personalizar el color de fuente y el tamaño de fuente de la fecha. mi código es:

 const DateSettings = () => { const [value, setValue] = React.useState<Date | null>(); const handleChange = (newValue: Date | null) => { setValue(newValue); }; return ( <Box> <LocalizationProvider dateAdapter={DateAdapter}> <Stack spacing={3}> <MobileDatePicker label="Date mobile" inputFormat="MM/dd/yyyy" value={value} onChange={handleChange} components={{ OpenPickerIcon: CalendarIcon }} renderInput={(params) => ( <TextField {...params} /> )} /> </Stack> </LocalizationProvider> </Box> ); }; export default DateSettings;

He intentado agregar estilo al campo de texto usando sx prop como de costumbre. Cambia el color de fondo pero no cambia el color de fuente y el tamaño de fuente si uso este bloque de código:

 renderInput={(params) => ( <TextField sx={{backgroundColor:'red',color:'white'}} {...params} /> )}

También probé un estilo personalizado como este, ¡pero sigue igual!

 const useStyles = makeStyles({ root: { background: "red", border: 0, borderRadius: 3, color: "white", }, }); const DateSettings = () => { const classes = useStyles(); return ( <Box> <LocalizationProvider dateAdapter={DateAdapter}> <Stack spacing={3}> <MobileDatePicker className={classes.root} inputFormat="MM/dd/yyyy" value={value} onChange={handleChange} components={{ OpenPickerIcon: CalendarIcon }} renderInput={(params) => ( <TextField {...params} /> )} /> </Stack> </LocalizationProvider> </Box> ); }; export default DateSettings;

¿Hay alguna otra forma de cambiarlo?