Css 如何在物料界面中显示空日期选择器-反应？ 当前实施 空时的当前行为

空时的预期行为

是否可以按照所附图像的预期外观设计材质UI日期选择器的样式？

• 只需将date的初始值设置为null（在您的状态下），它就会按照您期望的方式工作
• 当日期为空时，还可以使用prop提供自定义占位符

代码

函数应用程序（）{
const[dob，setDob]=useState（null）；//{
setDob（日期）；
};
返回(
({
日期选择器：{
边距：“2px 0px 2px 0px”，
高度：“60px”，
//宽度：“适合内容”，
填充：“20px 15px 10px”，
borderBottom:“2件纯蓝”，
背景颜色：“fff”，
颜色：“2c2c”，
宽度：300，
重量：600
}
}));
函数App（）{
const[dob，setDob]=useState（null）；//{
setDob（日期）；
};
返回(
是否可以更改空标签的CSS？也可以在日期为空时删除浮动标签吗？也请查看是否可以考虑进行投票并接受答案，也可以将浮动标签移到文本框的内部吗？尝试给出<代码>占位符= {出生日期}。

…我已经更新了演示。请使用相同的链接并重新加载浏览器。

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

.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;
}