MUI DesktopDatePicker如何在日历左侧显示Clear文本？

使用Material-UI 5.0.0版本的DesktopDatePicker，希望在日历弹窗左侧显示“Clear”文本，已在componentsProps的actionBar中添加position:"left"属性，但设置未生效。

代码示例：

import * as React from "react";
import dayjs from "dayjs";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";

export default function ResponsiveDatePickers() {
  const [value, setValue] = React.useState(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="For desktop"
        value={value}
        minDate={dayjs("2017-01-01")}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        componentsProps={{
          actionBar: { actions: ["clear"], position: "left" }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

当前效果：“Clear”按钮仍显示在日历弹窗右侧，未按预期左对齐。

原因分析 #

在MUI X v5版本中，actionBar的position属性并非控制按钮对齐的有效配置，该属性在当前版本API中无对应生效逻辑，需要通过自定义样式或组件重载实现按钮左对齐。

解决方法 #

方法1：通过sx样式直接覆盖 #

在componentsProps的actionBar中添加sx样式，修改容器的对齐方式：

import * as React from "react";
import dayjs from "dayjs";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";

export default function ResponsiveDatePickers() {
  const [value, setValue] = React.useState(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="For desktop"
        value={value}
        minDate={dayjs("2017-01-01")}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        componentsProps={{
          actionBar: { 
            actions: ["clear"], 
            sx: { justifyContent: "flex-start" } 
          }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

方法2：自定义ActionBar组件 #

重载ActionBar组件，手动控制内部元素对齐：

import * as React from "react";
import dayjs from "dayjs";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker, ActionBar } from "@mui/x-date-pickers";

export default function ResponsiveDatePickers() {
  const [value, setValue] = React.useState(dayjs("2022-04-07"));

  const CustomActionBar = (props) => {
    return (
      <ActionBar
        {...props}
        sx={{ justifyContent: "flex-start" }}
        actions={["clear"]}
      />
    );
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="For desktop"
        value={value}
        minDate={dayjs("2017-01-01")}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        components={{ ActionBar: CustomActionBar }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

说明 #

两种方案均通过修改ActionBar容器的justifyContent为flex-start，实现“Clear”按钮的左对齐，这是符合MUI X v5样式控制逻辑的有效方式。

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