如何在MUI v5的MobileDatePicker组件中添加触发图标

你当前使用的InputBase是MUI的极简输入组件，默认不带任何前后装饰元素，且未给MobileDatePicker配置触发图标相关参数，所以不会显示日历操作入口。可以通过以下两种方式修复：

方案1：保留InputBase用法，手动添加触发图标 #

先导入所需依赖（未导入的情况下）：

import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';

修改组件代码如下：

<MobileDatePicker
  showTodayButton
  showToolbar={false}
  disableCloseOnSelect={false}
  inputFormat="YYYY-MM-DD"
  views={['day']}
  value={row.value}
  onChange={(newValue) => row.onChange(newValue)}
  // 配置触发图标：MUI v5.14+用slots，更早版本替换为components即可
  slots={{ openPickerIcon: CalendarTodayIcon }}
  renderInput={(params) => {
    const endAdornment = (
      <InputAdornment position="end">
        <IconButton
          edge="end"
          onClick={params.InputProps?.onClick}
          disabled={params.disabled}
        >
          {params.InputProps?.endAdornment}
        </IconButton>
      </InputAdornment>
    )
    return (
      <InputBase 
        {...params} 
        className={classes.datePicker}
        endAdornment={endAdornment}
      />
    )
  }}
/>

方案2：替换InputBase为TextField，最简配置无需手动处理图标 #

TextField是MUI封装的标准输入组件，默认会自动承接DatePicker的图标配置，修改后代码如下：

<MobileDatePicker
  showTodayButton
  showToolbar={false}
  disableCloseOnSelect={false}
  inputFormat="YYYY-MM-DD"
  views={['day']}
  value={row.value}
  onChange={(newValue) => row.onChange(newValue)}
  renderInput={(params) => <TextField {...params} className={classes.datePicker} variant="standard" />}
/>

如果需要保留InputBase的极简无框样式，给TextField追加自定义CSS清除默认边框和下划线即可

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