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}
              ponents={{ 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}
              ponents={{ OpenPickerIcon: CalendarIcon }}
              renderInput={(params) => (
                <TextField  {...params} />
              )}
            />
         </Stack>
      </LocalizationProvider>
    </Box>
  );
};

export default DateSettings;

Is there any other way to change it?

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}
              ponents={{ 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}
              ponents={{ OpenPickerIcon: CalendarIcon }}
              renderInput={(params) => (
                <TextField  {...params} />
              )}
            />
         </Stack>
      </LocalizationProvider>
    </Box>
  );
};

export default DateSettings;

Is there any other way to change it?

• javascript
• reactjs
• material-ui

3 Answers 3

All you had to do was inspect the text, copy the applicable classname and apply classes.root directly to .

const useStyles = makeStyles({
  root: {
    "& .MuiOutlinedInput-input": {
      border: 0,
      borderRadius: 3,
      color: "red",
      fontSize: 24
    }
  }
});

const DateSettings() {
  const classes = useStyles();
  const [value, setValue] = useState(Date | (null > null));

  return (
    <Box>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Stack spacing={3}>
          <MobileDatePicker
            inputFormat="MM/dd/yyyy"
            value={value}
            onChange={handleChange}
            ponents={{ OpenPickerIcon: CalendarIcon }}
            renderInput={(params) => <TextField className={classes.root} {...params} />}
          />
        </Stack>
      </LocalizationProvider>
    </Box>
  );
}

With newer versions of react 18 usage of makeStyles is not possible and you will get import errors. On the other hand renderInput is not implemented, it will not perform any difference. My solution with most recent react and mui installations is

const CustomizedDateTimePicker = styled(DateTimePicker)`
   
    & .MuiInputBase-input {
      font-size: 1px;
    }
  `;

and in your render code

<CustomizedDateTimePicker
                format={"YYYY-MM-DDThh:mm:ss"}
                onChange={(e) => ..

With this way you can override font-size. Note, usage of & .MuiInputBase-input is critical otherwise the inner input will not be overridden.

You can also pass the base class in sx props and try to over-ride the base class styles.

<DatePicker
            {...field}
            variant="filled"
            value={field.value ? dayjs(field.value) : null}
            maxDate={maxDate ? dayjs() : undefined}
            slotProps={{
              textField: {
                variant: 'filled', error: false,
                InputProps: {
                  disableUnderline: true,
                  style: {
                    backgroundColor: "white"
                  }
                },
                style: { backgroundColor: "white" },
              },
            }}
            label={label}

            sx={{
              backgroundColor: 'white',
              border: 'none',
              borderRadius: '1px',
              maxWidth: '500px',
              width: '100%',
              fontSize: '1.25rem',
              lineHeight: '15px',
              height: '70px',
              '& .MuiIconButton-root': { // Target the icon button inside the DateRangePicker
                backgroundColor: 'white', // Set background color to white
              },
              '& .MuiInputLabel-root':{
                fontSize: '1.25rem', //Change the label font
              },
              input: { backgroundColor: 'white', marginTop: '5px', fontSize: '1.20rem', },
              svg: { marginTop: '10px' },
            
            }}
          />