Material-UI日期选择器高度调整：如何通过sx属性自定义高度？

要自定义日期选择器的高度，不能只单独设置height，需要同步调整内部输入框的内边距、文字行高以及图标按钮的尺寸，避免元素错位。以下是几种可行的实现方式：

1. 直接通过sx属性自定义单个日期选择器 #

给TextField传入sx样式，穿透调整内部组件的布局：

import { DatePicker, TextField } from '@mui/material';
import { useState } from 'react';

export default function CustomHeightDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <DatePicker
      label="选择日期"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          sx={{
            height: '35px',
            // 调整输入框根元素高度
            '& .MuiInputBase-root': {
              height: '100%',
            },
            // 让输入文字垂直居中，适配高度
            '& .MuiInputBase-input': {
              padding: '0 14px',
              lineHeight: '35px',
            },
            // 缩小图标按钮的内边距，匹配整体高度
            '& .MuiIconButton-root': {
              padding: '8px',
              height: '100%',
            },
            // 可选：调整标签的位置，避免高度变化后错位
            '& .MuiInputLabel-root': {
              transform: 'translate(14px, 10px) scale(1)',
              '&.Mui-focused': {
                transform: 'translate(14px, -9px) scale(0.75)',
              }
            }
          }}
        />
      )}
    />
  );
}

2. 适配Desktop/Mobile特定日期选择器 #

如果使用DesktopDatePicker或MobileDatePicker，逻辑类似，同样通过sx穿透样式：

import { DesktopDatePicker, TextField } from '@mui/x-date-pickers/DesktopDatePicker';
import { useState } from 'react';

export default function CustomDesktopDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <DesktopDatePicker
      label="选择日期"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          sx={{
            height: '35px',
            '& .MuiInputBase-root': {
              height: '100%',
            },
            '& .MuiInputBase-input': {
              height: '100%',
              padding: '0 12px',
              display: 'flex',
              alignItems: 'center',
            },
            '& .MuiIconButton-root': {
              height: '100%',
              padding: '6px',
            }
          }}
        />
      )}
    />
  );
}

3. 全局统一自定义高度（适合多个日期选择器场景） #

如果需要项目中多个日期选择器使用同一高度，可以通过自定义主题实现：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DatePicker, TextField } from '@mui/material';
import { useState } from 'react';

const customTheme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '&.custom-date-picker': {
            height: '35px',
            '& .MuiInputBase-root': {
              height: '100%',
            },
            '& .MuiInputBase-input': {
              padding: '0 14px',
              lineHeight: '35px',
            },
            '& .MuiIconButton-root': {
              padding: '8px',
              height: '100%',
            }
          }
        }
      }
    }
  }
});

export default function GlobalCustomDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <ThemeProvider theme={customTheme}>
      <DatePicker
        label="选择日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} className="custom-date-picker" />}
      />
    </ThemeProvider>
  );
}

内容的提问来源于stack exchange，提问作者CatherineKim