MUI X Date Picker v6：如何通过Slots修改默认图标及其位置

在6.x版本中，原renderInput被替换为Slots API，核心是通过slots和slotProps配置项实现输入框及面板的自定义。以下是适配你需求的具体实现步骤：

1. 核心思路 #

通过重写textField slot，自定义输入框的结构与样式，替代原renderInput的功能。你可以复用MUI的TextField组件修改样式，也可以完全自定义输入框结构。

2. 代码示例：自定义内嵌图标输入框样式 #

以下示例实现类似目标样式（圆角边框、日历图标内嵌右侧、简洁输入框）：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import { styled } from '@mui/material/styles';

// 自定义输入框样式
const StyledTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    borderRadius: 8,
    paddingRight: 8,
    '& fieldset': {
      borderColor: theme.palette.grey[300],
    },
    '&:hover fieldset': {
      borderColor: theme.palette.primary.main,
    },
    '&.Mui-focused fieldset': {
      borderColor: theme.palette.primary.main,
      borderWidth: 2,
    },
  },
  '& .MuiInputAdornment-positionEnd': {
    marginLeft: 0,
  },
}));

function CustomDatePicker() {
  return (
    <DatePicker
      label="选择日期"
      slots={{
        // 重写textField slot，使用自定义样式的TextField
        textField: ({ inputRef, inputProps, ...props }) => (
          <StyledTextField
            {...props}
            inputRef={inputRef}
            inputProps={inputProps}
            InputProps={{
              endAdornment: (
                <CalendarTodayIcon
                  sx={{ color: 'grey.500', cursor: 'pointer' }}
                />
              ),
            }}
          />
        ),
      }}
      // 通过slotProps传递通用属性
      slotProps={{
        textField: {
          variant: 'outlined',
          size: 'small',
        },
      }}
    />
  );
}

3. 完全自定义输入框结构 #

如果需要更灵活的结构（脱离TextField组件），可直接在textField slot中编写自定义DOM，只需绑定inputRef和inputProps保证交互逻辑正常：

slots={{
  textField: ({ inputRef, inputProps, value, onClick }) => (
    <div 
      sx={{
        border: '1px solid #e0e0e0',
        borderRadius: 8,
        padding: '8px 12px',
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        cursor: 'pointer',
        '&:hover': { borderColor: '#1976d2' }
      }}
      onClick={onClick}
    >
      <input
        ref={inputRef}
        {...inputProps}
        value={value}
        sx={{ border: 'none', outline: 'none', flex: 1 }}
        readOnly
      />
      <CalendarTodayIcon sx={{ color: '#9e9e9e' }} />
    </div>
  ),
}}

4. 自定义日历面板样式（可选） #

若需调整弹出的日历面板样式，可通过calendar、day等slot修改，例如：

slots={{
  calendar: styled('div')(({ theme }) => ({
    borderRadius: 12,
    boxShadow: theme.shadows[4],
    overflow: 'hidden',
  })),
}}

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