如何让MUI 5日期选择器无值时标签保持展开状态？

要实现无选中值时标签不收起的效果，最简洁的方式是通过renderInput中传递给TextField的InputLabelProps设置shrink: true，强制标签保持展开状态。

修改后的代码如下：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => (
      <TextField 
        {...params} 
        InputLabelProps={{ ...params.InputLabelProps, shrink: true }} 
      />
    )}
  />
</LocalizationProvider>

原理说明 #

Material UI的TextField默认会根据输入框是否有值或是否聚焦，自动控制标签的收起/展开。设置shrink: true后，会强制标签一直处于“悬浮在输入框上方”的展开状态，不管输入框是否有值或获得焦点，完全匹配你想要的效果。

这种方式无需额外添加自定义容器或复杂样式，直接复用组件自身的属性配置，是最贴合MUI设计体系的简洁实现。

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