如何移除Material UI DesktopDatePicker标签并修复填充变体占位符偏移

移除DesktopDatePicker的标签后，filled（填充）变体的占位符文本出现下移问题，但outlined（轮廓）变体显示正常。需要使用filled变体，并实现与outlined变体一致的布局效果。

移除标签后的填充变体效果 #

轮廓变体效果 #

原代码 #

<DesktopDatePicker
  inputFormat="MM/DD/YYYY"
  value={null}
  onChange={(newValue: Dayjs | null) => console.log(newValue)}
  InputProps={{ disableUnderline: true }}
  renderInput={(params) => (
    <TextField
      variant="filled"
      sx={{
        ".MuiInputBase-root": {
          borderRadius: "10px",
        },
      }}
      {...params}
    />
  )}
/>

问题源于Material UI的filled变体TextField在无label时，输入框的默认内边距和布局逻辑与outlined变体不同。通过自定义SX样式调整输入框的内边距和标签容器显示，即可让占位符回到正确位置：

修改后的代码 #

<DesktopDatePicker
  inputFormat="MM/DD/YYYY"
  value={null}
  onChange={(newValue: Dayjs | null) => console.log(newValue)}
  InputProps={{ disableUnderline: true }}
  renderInput={(params) => (
    <TextField
      variant="filled"
      sx={{
        ".MuiInputBase-root": {
          borderRadius: "10px",
        },
        // 调整输入框内边距，匹配outlined变体的垂直居中效果
        ".MuiFilledInput-input": {
          padding: "16px 14px",
        },
        // 彻底隐藏标签容器，避免占位空间影响布局
        ".MuiInputLabel-root": {
          display: "none",
        },
      }}
      {...params}
    />
  )}
/>

说明 #

• 给.MuiFilledInput-input设置统一的内边距，让占位符垂直居中，对齐outlined变体的高度
• 强制隐藏.MuiInputLabel-root，消除标签容器默认占据的空间，避免输入框被向下挤压
• 保留原有的border-radius设置，维持自定义圆角样式

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