如何自定义设置MUI X Date Picker文本框高度（非预设尺寸）

要直接用像素值定义DatePicker文本框高度，核心是绕过预设的size属性，直接针对底层TextField的内部元素覆盖样式——默认的size属性会给文本框套上固定的内边距、行高样式，直接设height会被这些样式抵消。

可行方案示例 #

<Box sx={{ m: 1 }}>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DatePicker
      label="Enter Date"
      slotProps={{ 
        textField: { 
          sx: {
            // 自定义文本框整体高度
            height: '40px',
            // 调整输入区域的内边距和行高，避免内容错位
            '& .MuiInputBase-input': {
              padding: '8px 14px',
              lineHeight: '1',
              fontSize: '14px',
            },
            // 调整边框位置，保证视觉垂直居中
            '& .MuiOutlinedInput-notchedOutline': {
              top: '50%',
              transform: 'translateY(-50%)',
            }
          }
        } 
      }}
      sx={{
        width: "80%",
      }}
    />
  </LocalizationProvider>
</Box>

关键说明 #

1. DatePicker的文本框基于MUI TextField实现，直接设置height后，必须同步调整内部.MuiInputBase-input的内边距和行高，否则输入内容会偏移或被裁剪。
2. 调整.MuiOutlinedInput-notchedOutline的位置是为了让边框和文本框整体高度对齐，避免边框错位。
3. 如果需要适配聚焦、hover等状态，可在sx中扩展伪类样式：

'&:hover .MuiOutlinedInput-notchedOutline': {
  borderColor: '#666',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
  borderWidth: '2px',
}

内容的提问来源于stack exchange，提问作者M.Talal Adnan