如何阻止Material UI日期选择器获焦时标签上浮？

直接设置InputLabelProps={{ shrink: false }}无效，是因为DatePicker组件会根据输入框的聚焦/有值状态自动覆盖shrink属性。可以通过强制覆盖标签收缩时的样式来解决：

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="dd"
        sx={{
          // 强制覆盖标签收缩时的样式，保持原位置
          '& .MuiInputLabel-shrink': {
            transform: 'translate(0, 1.5px) scale(1)',
            transformOrigin: 'top left',
          }
        }}
      />
    </LocalizationProvider>
  );
}

原理是：Material UI的MuiInputLabel-shrink类会在输入框聚焦/有值时触发，默认通过transform让标签上浮缩小。我们通过sx样式将这个类的transform重置为标签未收缩时的状态，从而阻止上浮效果。

如果需要更彻底的控制，也可以自定义输入组件，用TextField作为DatePicker的inputComponent，在TextField中更细致地控制标签行为：

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="dd"
        inputComponent={({ ref, ...props }) => (
          <TextField
            {...props}
            inputRef={ref}
            InputLabelProps={{ shrink: false }}
            sx={{ '& .MuiInputLabel-shrink': { display: 'none' } }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

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