React项目中如何让Material-UI日期选择器渲染Input而非TextField

嘿，我来帮你搞定这个问题！你找对方向了，TextFieldComponent属性就是用来替换DatePicker默认TextField的核心配置项，下面给你具体的实现方法和代码示例：

首先，你需要先从Material-UI库中导入Input组件——这是我们要用来替换默认TextField的目标组件：

import DatePicker from 'material-ui-pickers/DatePicker';
import Input from '@material-ui/core/Input';

接下来，在你的DatePicker组件中，把TextFieldComponent属性设置为一个接收props的函数组件，将传入的props直接传递给Input即可。DatePicker会自动把日期选择相关的必要props（比如value、触发选择器的点击事件等）传递给这个自定义组件，这样既能保留日期选择的核心功能，又能去掉TextField自带的装饰样式：

<DatePicker
  id={name}
  // 核心配置：替换为Input组件
  TextFieldComponent={(props) => <Input {...props} />}
  value={yourDateState}
  onChange={(selectedDate) => handleDateChange(selectedDate)}
  // 这里可以添加其他DatePicker的配置项，比如日期格式
  format="YYYY-MM-DD"
/>

如果你还想保留打开日期选择器的图标（但不想用TextField的完整装饰），可以搭配InputAdornment和Material-UI的图标组件来实现：

// 额外导入需要的组件
import InputAdornment from '@material-ui/core/InputAdornment';
import CalendarTodayIcon from '@material-ui/icons/CalendarToday';

// 使用带图标的Input
<DatePicker
  id={name}
  TextFieldComponent={(props) => (
    <Input
      {...props}
      endAdornment={
        <InputAdornment position="end">
          <CalendarTodayIcon 
            onClick={props.onClick} 
            style={{ cursor: 'pointer', color: '#666' }} 
          />
        </InputAdornment>
      }
    />
  )}
  value={yourDateState}
  onChange={(selectedDate) => handleDateChange(selectedDate)}
  format="YYYY-MM-DD"
/>

这样配置后，DatePicker就只会渲染纯Input组件，完全去掉TextField的边框、标签等默认装饰样式啦。

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