如何在 Material UI-REACT 中显示空日期选择器？

Question

目前的实施

<MuiPickersUtilsProvider utils={DateFnsUtils}>
     <DatePicker
      fullWidth
      value={dob}
      label="Date of Birth"
      format="dd / MM / yyyy"
      margin="normal"
      maxDate={new Date()}
      InputProps={{ className: css.datepicker }}
      ></DatePicker>
</MuiPickersUtilsProvider>

CSS 代码

.datepicker {
  margin: 2px 0px 2px 0px;
  height: 60px;
  width: fit-content;
  padding: 20px 15px 10px;
  border-bottom: 2px solid $lightGrey;
  background-color: #fff;
  color: #2c2c2c;
  width: 300px;
  font-weight: 600;
}

空时的当前行为

空时的预期行为

是否可以按照我预期的外观样式设置 Material UI 日期选择器的样式，如所附图像？

Answer 1

• 只需将 date 的初始值提供为 null（在您所在的州），它就会按您预期的方式工作。
• 当日期为空时，您也可以使用emptyLabel道具提供自定义占位符

在此处查看代码和框中的演示

代码

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label="Date of Birth"
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        //  InputProps={{ className: css.datepicker }}
      />
    </MuiPickersUtilsProvider>
  );
}

编辑：根据评论回答后续问题。

1. 当日期为空时删除浮动标签- 有值时为标签提供dob值

label={dob && "Date of Birth"}

2. 为空标签应用样式- 使用makeStyles和InputProps

const useStyles = makeStyles(theme => ({
  datepicker: {
    margin: "2px 0px 2px 0px",
    height: "60px",
    // width: 'fit-content',
    padding: "20px 15px 10px",
    borderBottom: "2px solid blue",
    backgroundColor: "#fff",
    color: "#2c2c2c",
    width: 300,
    fontWeight: 600
  }
}));

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const classes = useStyles();
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label={dob && "Date of Birth"}
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        InputProps={{ className: !dob ? classes.datepicker : null }} //<----apply style when no date selected
      />
    </MuiPickersUtilsProvider>
  );
}

代码沙盒演示已更新以反映上述所有要点。