本文详解如何通过 sx 属性精确控制 MUI X Date Picker 中文本输入框（TextField）的高度，突破 size="small" 等预设尺寸限制，实现像素级自定义（如 20px），并同步处理标签定位等关键样式细节。

本文详解如何通过 `sx` 属性精确控制 mui x date picker 中文本输入框（textfield）的高度，突破 `size="small"` 等预设尺寸限制，实现像素级自定义（如 20px），并同步处理标签定位等关键样式细节。

在使用 MUI X 的 组件时，开发者常需对表单控件进行精细化样式定制。虽然 slotProps.textField.size 提供了 small/medium/large 三档预设高度，但无法满足如 “固定 24px 输入框高度” 这类精确设计需求。此时，应借助 sx 属性直接穿透到内部 OutlinedInput 的 DOM 结构进行样式覆盖。

核心方法是：在 slotProps.textField.sx 中，使用 CSS 选择器定位 .MuiOutlinedInput-root，并设置 height。注意必须使用 > 子选择器确保样式精准作用于根容器，避免影响图标、标签等其他子元素：

import { DatePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

// 示例：将文本框高度设为 24px
<localizationprovider dateadapter="{AdapterDayjs}"><datepicker label="Enter Date" slotprops="{{" textfield: sx:> .MuiOutlinedInput-root': {
            height: 24, // ✅ 关键：直接设置输入框容器高度
            // 可选：微调内边距以保证文字垂直居中
            '& .MuiInputBase-input': {
              py: 0,
              px: 1.5,
              fontSize: '0.875rem',
            },
          },
        },
      },
    }}
    sx={{ width: '80%' }}
  />
</datepicker></localizationprovider>

⚠️ 重要注意事项：

• 标签（label）位置需同步调整：当 height 显著小于默认值（如 slotProps={{ textField: { InputLabelProps: { shrink: true, // 强制标签收缩状态 }, sx: { '> .MuiOutlinedInput-root': { height: 24, }, '& .MuiFormLabel-root': { transform: 'translate(14px, -6px) scale(0.75)', // 手动定位收缩态标签 top: -6, }, } } }}
• 响应式与可访问性：过小的高度（如
• 不要滥用 !important：MUI 的 sx 属性已具备高优先级，通常无需 !important；若样式未生效，请检查是否被更深层的嵌套样式覆盖（可用浏览器 DevTools 验证计算样式）。

✅ 总结：通过 slotProps.textField.sx 精准靶向 >.MuiOutlinedInput-root 是实现像素级高度定制的推荐方案。它兼顾灵活性与稳定性，且完全兼容 MUI 的主题系统与响应式逻辑。实际开发中，建议将常用高度封装为自定义 Hook 或主题变量，提升代码复用性与维护性。