如何去除MUI DatePicker未输入值时显示的红色边框？

问题原因 #

你手动设置的error={false}被renderInput传入的params对象覆盖了——params里默认包含error属性（未选日期时为true），对象展开语法{...params}会将这个属性带入TextField，且因为它在error={false}之后，所以覆盖了你手动设置的值。

解决方案 #

有两种简单的修复方式：

方式1：解构params并排除error属性

把params里的error属性剔除后再传入TextField，确保手动设置的error={false}生效：

renderInput={({ error, ...rest }) => (
  <TextField error={false} fullWidth {...rest} />
)}

方式2：调整属性顺序，让手动设置的error覆盖params中的值

将error={false}放在{...params}后面，后声明的属性会覆盖前面的：

renderInput={(params) => (
  <TextField fullWidth {...params} error={false} />
)}

额外优化建议 #

DatePicker的value属性建议使用Dayjs对象或null作为初始值，而非空字符串，避免类型不匹配带来的潜在问题：

const [selectDate, setSelectDate] = useState(null);

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