I am having an issue while using MUI DatePicker . I am not being able to customize the font color & font size of the date. My code is :

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;

I have tried adding style to the textfield using sx prop as usual. It changes the background color but doesn't change the font color & font size if I use this code block:

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

I have also tried custom style like this, but still the same!

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;

Is there any other way to change it?