如何缩小MUI X Date Picker输入框高度并优化图标布局？

针对你提出的三个样式调整需求，以下是具体的实现方案，可通过MUI的sx属性或全局主题定制来完成：

1. 减小输入框高度 #

通过调整输入框根元素的高度、行高，以及输入内容的内边距来缩小整体高度：

<DatePicker
  sx={{
    '& .MuiInputBase-root': {
      height: '32px', // 自定义目标高度
      lineHeight: '32px',
    },
    '& .MuiOutlinedInput-input': {
      padding: '0 14px', // 缩减输入内容的上下内边距
    },
    // 保留已移除边框的样式
    '& .MuiOutlinedInput-notchedOutline': {
      border: 'none',
    },
  }}
  renderInput={(params) => <TextField {...params} />}
/>

2. 调整关闭图标与日历图标的间距 #

通过修改图标容器的间距、图标按钮的内边距来减少空间占用：

<DatePicker
  sx={{
    '& .MuiInputAdornment-root .MuiIconButton-root': {
      padding: '4px', // 缩小图标按钮的点击区域，减少空间占用
    },
    '& .MuiInputAdornment-root:first-of-type': {
      marginRight: '6px', // 调整关闭图标右侧与输入内容的间距
    },
    '& .MuiInputAdornment-root:last-of-type': {
      marginLeft: '6px', // 调整日历图标左侧与输入内容的间距
    },
  }}
  renderInput={(params) => <TextField {...params} />}
/>

3. 调整椭圆形背景的宽高 #

通过设置输入框的圆角、宽度和背景色来实现椭圆形效果：

<DatePicker
  sx={{
    '& .MuiOutlinedInput-root': {
      borderRadius: '16px', // 圆角值根据高度调整，形成椭圆
      width: '180px', // 自定义背景宽度
      backgroundColor: '#f5f5f5', // 按需设置背景色
    },
  }}
  renderInput={(params) => <TextField {...params} />}
/>

完整整合示例 #

将以上三个调整合并到一个组件中：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

export default function CustomStyledDatePicker() {
  return (
    <DatePicker
      renderInput={(params) => <TextField {...params} />}
      sx={{
        // 移除边框
        '& .MuiOutlinedInput-notchedOutline': {
          border: 'none',
        },
        // 减小输入框高度
        '& .MuiInputBase-root': {
          height: '32px',
          lineHeight: '32px',
        },
        '& .MuiOutlinedInput-input': {
          padding: '0 14px',
        },
        // 调整图标间距与大小
        '& .MuiInputAdornment-root .MuiIconButton-root': {
          padding: '4px',
        },
        '& .MuiInputAdornment-root:first-of-type': {
          marginRight: '6px',
        },
        '& .MuiInputAdornment-root:last-of-type': {
          marginLeft: '6px',
        },
        // 椭圆形背景调整
        '& .MuiOutlinedInput-root': {
          borderRadius: '16px',
          width: '180px',
          backgroundColor: '#f5f5f5',
        },
      }}
    />
  );
}

全局样式定制（可选） #

如果需要在整个应用中统一使用该样式，可以通过createTheme全局覆盖：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CustomStyledDatePicker from './CustomStyledDatePicker';

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: '16px',
          width: '180px',
          backgroundColor: '#f5f5f5',
          '& .MuiOutlinedInput-notchedOutline': {
            border: 'none',
          },
        },
        input: {
          padding: '0 14px',
        },
      },
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          height: '32px',
          lineHeight: '32px',
        },
      },
    },
    MuiInputAdornment: {
      styleOverrides: {
        root: {
          '& .MuiIconButton-root': {
            padding: '4px',
          },
          '&:first-of-type': {
            marginRight: '6px',
          },
          '&:last-of-type': {
            marginLeft: '6px',
          },
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CustomStyledDatePicker />
    </ThemeProvider>
  );
}

export default App;

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