如何为MUI KeyboardDatePicker添加尾部校验装饰图标？

KeyboardDatePicker 是基于 TextField 封装的组件，你可以通过它的 InputProps 属性手动添加尾部的校验图标，具体操作如下：

• 先引入所需的图标和组件：

import InputAdornment from '@mui/material/InputAdornment';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';

• 在 KeyboardDatePicker 中配置 InputProps，通过 endAdornment 渲染对应状态的图标：

<KeyboardDatePicker
  // 你的其他配置属性...
  InputAdornmentProps={{ position: 'start', variant: 'standard' }}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        {/* 这里的 isValid 是你自己维护的校验状态变量 */}
        {isValid ? (
          <CheckCircleIcon style={{ color: '#2e7d32', fontSize: 20 }} />
        ) : (
          <ErrorIcon style={{ color: '#c62828', fontSize: 20 }} />
        )}
      </InputAdornment>
    )
  }}
/>

• 细节说明：isValid 变量需要根据你的业务校验逻辑赋值（比如判断日期格式是否合法、是否符合指定范围等），以此动态切换成功/失败图标。如果需要调整图标大小、间距或添加交互事件，直接在图标组件上追加对应属性即可。

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