如何修改MUI X StaticDateTimePicker的标题文本？

方案一：快速替换标题文本 #

如果仅需修改标题内容，无需手动引入DateTimePickerToolbar，直接给StaticDateTimePicker传入toolbarTitle属性即可：

import { StaticDateTimePicker } from '@mui/x-date-pickers';

<StaticDateTimePicker
  toolbarTitle="自定义日期时间选择器"
  // 补充你的其他必要属性（如value、onChange等）
/>

方案二：深度自定义Toolbar组件 #

若需要更灵活的UI调整（比如添加图标、修改布局或样式），可以基于默认的DateTimePickerToolbar进行二次封装，再通过ToolbarComponent属性传入：

import { StaticDateTimePicker, DateTimePickerToolbar } from '@mui/x-date-pickers';

// 自定义Toolbar组件
const CustomDateTimeToolbar = (props) => {
  return (
    <DateTimePickerToolbar
      {...props}
      // 替换标题内容
      title="我的专属选择器标题"
      // 可在此处添加额外元素或自定义样式
    />
  );
};

// 使用自定义Toolbar
<StaticDateTimePicker
  ToolbarComponent={CustomDateTimeToolbar}
  // 补充其他必要属性
/>

方案三：全局统一配置标题 #

如果需要让项目中所有StaticDateTimePicker使用统一标题，可通过MUI主题进行全局配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { StaticDateTimePicker } from '@mui/x-date-pickers';

const customTheme = createTheme({
  components: {
    MuiStaticDateTimePicker: {
      defaultProps: {
        toolbarTitle: '全局统一标题',
      },
    },
  },
});

// 在主题提供者中包裹组件
<ThemeProvider theme={customTheme}>
  <StaticDateTimePicker />
</ThemeProvider>

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