MUI DatePicker 默认文本字段无法使用不同的字体颜色和大小进行自定义

Question

我在使用 MUI DatePicker 时遇到问题。我无法自定义日期的字体颜色和字体大小。我的代码是：

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;

我试过像往常一样使用 sx 属性向文本字段添加样式。如果我使用此代码块，它会更改背景颜色但不会更改字体颜色和字体大小：

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

我也试过这样的自定义样式，还是一样！

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;

还有其他方法可以改变吗？

Answer 1

您所要做的就是检查文本，复制适用的类名并将 classes.root 直接应用于 .

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

MUI DatePicker 默认文本字段无法使用不同的字体颜色和大小进行自定义

MUI DatePicker default textfield cannot be customized with different font color and size

javascript

reactjs

material-ui