如何为MUI X v5 DatePicker添加占位符（非标签）

方法1：通过slotProps直接配置占位符并隐藏标签 #

MUI 5的DatePicker可通过slotProps给内部TextField传递属性，同时禁用浮动标签行为：

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

<DatePicker
  slotProps={{
    textField: {
      placeholder: '选择日期',
      label: '',
      InputLabelProps: {
        shrink: false,
      },
      variant: 'outlined'
    }
  }}
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
/>

方法2：自定义TextField组件传入DatePicker #

若上述方案无效，可直接传入自定义TextField组件完全控制输入框表现：

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

<DatePicker
  renderInput={(params) => (
    <TextField
      {...params}
      placeholder="选择日期"
      label=""
      InputLabelProps={{
        shrink: false,
      }}
      sx={{
        '& .MuiInputLabel-root': {
          display: 'none',
        },
      }}
    />
  )}
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
/>

关键注意事项 #

• 确保MUI X DatePicker为最新版本，旧版本可能存在属性兼容性问题
• 不要设置非空label值，避免触发浮动标签行为
• 若使用filled样式变体，需调整sx样式移除标签占位空间

内容的提问来源于stack exchange，提问作者Muhammad Naveed Nawab