MUI DatePicker v5转v6：TextField自定义样式配置求助

我正在将MUI DatePicker从v5迁移到v6，功能已正常运行，但遇到TextField样式自定义的问题。v5中我可以直接通过renderInput传入自定义Styled TextField，但v6改用slots机制后不知道如何传递样式。

v5 版本代码 #

<DatePicker
    value={fromDate}
    onChange={onFromDateChange}
    minDate={props.minDate}
    maxDate={props.maxDate}
    ignoreInvalidInputs
    inputFormat={DateConstants.DATE_YEAR}
    renderInput={(params) => <Styled.TextFieldFrom {...params} />}
    InputAdornmentProps={{ position: "start" }}
/>

v6 当前代码 #

<DatePicker
    value={fromDate}
    onChange={onFromDateChange}
    minDate={props.minDate}
    maxDate={props.maxDate}
    format={DateConstants.DATE_YEAR}
    formatDensity="spacious"
/>

v5 自定义样式代码 #

TextFieldFrom: styled(TextField)({
    paddingLeft: "1.4rem",
    ".MuiOutlinedInput-root": {
    ...inputCommonStyled,
    },
    ...textFieldCommonStyled,
}),

尝试过的无效方法 #

slotProps={{
    textField: {
        InputProps: {
            startAdornment: <InputAdornment position="start" />,
        },
    },
}}

解决方案 #

方法1：通过 slots 传入自定义 Styled TextField #

v6 中可以直接通过 slots.textField 替换默认的输入组件，将你已定义好的 Styled.TextFieldFrom 传入即可：

// 保留原有自定义样式组件
const Styled = {
  TextFieldFrom: styled(TextField)({
    paddingLeft: "1.4rem",
    ".MuiOutlinedInput-root": {
      ...inputCommonStyled,
    },
    ...textFieldCommonStyled,
  }),
};

// DatePicker 配置
<DatePicker
  value={fromDate}
  onChange={onFromDateChange}
  minDate={props.minDate}
  maxDate={props.maxDate}
  format={DateConstants.DATE_YEAR}
  formatDensity="spacious"
  slots={{
    textField: Styled.TextFieldFrom // 传入自定义样式组件
  }}
  slotProps={{
    textField: {
      InputProps: {
        startAdornment: <InputAdornment position="start" />
      }
    }
  }}
/>

方法2：通过 slotProps.sx 直接注入样式 #

如果不想单独定义Styled组件，也可以直接在slotProps中通过sx属性写入样式：

<DatePicker
  value={fromDate}
  onChange={onFromDateChange}
  minDate={props.minDate}
  maxDate={props.maxDate}
  format={DateConstants.DATE_YEAR}
  formatDensity="spacious"
  slotProps={{
    textField: {
      sx: {
        paddingLeft: "1.4rem",
        "& .MuiOutlinedInput-root": {
          ...inputCommonStyled,
        },
        ...textFieldCommonStyled,
      },
      InputProps: {
        startAdornment: <InputAdornment position="start" />
      }
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Matouš Najman