如何让Material UI Datepicker匹配其他表单字段的统一样式？

我太懂这种想让所有表单元素整整齐齐，结果唯独Datepicker特立独行的憋屈了！之前做项目统一表单样式时，也被MUI Datepicker的特殊结构坑过几次。你的fieldSx逻辑是对的，但因为Datepicker的TextField内部结构和普通TextField有细微差异，导致部分选择器没命中目标元素，还有样式优先级不够的问题。试试下面的调整方案：

第一步：调整Datepicker的slotProps配置 #

先把Datepicker的textField插槽配置里的sx替换为针对性修改后的样式对象，确保基础属性和其他表单字段一致：

<Grid item xs={12} sm={4}>
  <InputLabel shrink sx={captionSx}>Invoice Date</InputLabel>
  <DatePicker
    value={invoiceDate}
    onChange={setInvoiceDate}
    slotProps={{
      textField: {
        fullWidth: true,
        size: "medium",
        sx: { mt: 1, ...customDatePickerSx }, // 替换为修改后的样式
        placeholder: "MM/DD/YYYY",
      },
    }}
  />
</Grid>

第二步：修改样式对象，适配Datepicker结构 #

重新定义样式对象，补充针对Datepicker输入框的特殊选择器，确保所有状态下的样式统一：

const customDatePickerSx = {
  "& .MuiOutlinedInput-root": {
    height: 44,
    backgroundColor: pillBg,
    borderRadius: UNIFORM_RADIUS,
    // 强制覆盖Datepicker可能自带的边框半径和内边距
    "& fieldset": {
      borderRadius: UNIFORM_RADIUS,
      borderColor: "#333",
      transition: "border-color 0.2s, border-radius 0.2s",
      padding: 0, // 去掉fieldset默认内边距，避免边框半径错位
    },
    "&:hover fieldset": {
      borderColor: FOCUS_COLOR,
    },
    "&.Mui-focused fieldset": {
      borderColor: `${FOCUS_COLOR} !important`,
      borderWidth: 2,
      borderRadius: UNIFORM_RADIUS, // 聚焦时也保持统一半径
    },
    // 针对Datepicker输入框的内部对齐和样式
    "& .MuiInputBase-input": {
      height: "100%",
      padding: "0 14px",
      fontSize: "1.05rem",
      color: "#fff",
      backgroundColor: pillBg,
      borderRadius: UNIFORM_RADIUS,
      boxSizing: "border-box",
      display: "flex",
      alignItems: "center",
      lineHeight: "44px",
      // 去掉浏览器默认的日期输入框内边距
      "&::-webkit-datetime-edit": {
        padding: 0,
        margin: 0,
      },
    },
  },
  "& .MuiInputLabel-root": {
    color: "text.secondary",
  },
  // 处理Datepicker自带的日历图标按钮，避免破坏高度对齐
  "& .MuiInputAdornment-root": {
    "& .MuiIconButton-root": {
      color: "#fff",
      padding: "0 8px",
      height: 44,
      display: "flex",
      alignItems: "center",
    },
  },
};

关键调整点说明 #

1. 强制统一边框半径：在fieldset的所有状态（默认、hover、focus）下都明确设置borderRadius: UNIFORM_RADIUS，防止MUI的默认样式覆盖
2. 修正输入框内边距：添加&::-webkit-datetime-edit去掉浏览器默认的日期输入框内边距，保证高度和普通输入框一致
3. 适配图标按钮：补充MuiInputAdornment-root的样式，让Datepicker自带的日历图标按钮和输入框高度对齐，不破坏整体布局
4. 提升样式优先级：保留!important在聚焦时的边框颜色上，确保能覆盖MUI的默认聚焦样式

如果还是有个别样式不生效，直接用浏览器的元素审查工具（F12）选中Datepicker的输入框，查看哪些类的样式优先级更高，再针对性地调整选择器的权重就好！

内容来源于stack exchange