如何在 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 属性提供自定义占位符

see demo in codesandbox here

代码

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"}

1. 为空标签应用样式 - 使用 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>
  );
}

codesandbox 演示已更新以反映上述所有要点。