React+Material-UI：TextField标签与日期格式(dd-mm-yyyy)重叠问题求助

方案1：强制标签收缩（最简单直接） #

给TextField添加InputLabelProps={{ shrink: true }}，让标签始终处于收缩状态，避免和日期占位符（dd-mm-yyyy）重叠：

<TextField
  label="Depart"
  type="date"
  fullWidth
  className='InputBase'
  variant='filled'
  InputLabelProps={{ shrink: true }}
/>
<TextField
  label="Return"
  type="date"
  fullWidth
  className='InputBase'
  variant='filled'
  InputLabelProps={{ shrink: true }}
/>

方案2：自定义样式调整标签位置 #

如果希望标签在输入框未聚焦时仍保持顶部显示但不重叠，可通过makeStyles修改标签定位：

const useStyles = makeStyles({
  dateTextField: {
    '& .MuiInputLabel-root': {
      top: '-10px', // 向上调整标签位置
      backgroundColor: '#fff', // 用背景色覆盖下方日期占位符
      padding: '0 4px',
    },
    '& .MuiInputLabel-shrink': {
      top: 'inherit', // 聚焦或有值时恢复默认收缩样式
      backgroundColor: 'transparent',
    }
  }
});

// 组件内使用
const classes = useStyles();

<TextField
  label="Depart"
  type="date"
  fullWidth
  className={`InputBase ${classes.dateTextField}`}
  variant='filled'
/>

方案3：使用专用日期选择器组件（长期推荐） #

Material-UI Core的原生date类型TextField依赖浏览器原生控件，样式和格式控制受限。推荐使用@mui/x-date-pickers的DatePicker组件，支持自定义日期格式，从根源避免标签重叠：

1. 安装依赖：

npm install @mui/x-date-pickers @emotion/react @emotion/styled

2. 组件示例：

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

// 组件内使用
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Depart"
    inputFormat="dd-MM-yyyy"
    renderInput={(params) => <TextField {...params} variant="filled" fullWidth className="InputBase" />}
  />
</LocalizationProvider>

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