如何修改MUI datepicker对话框中OK按钮的显示文本

官方没有提供单独修改弹窗确认按钮文本的顶层props，可通过以下两种稳定方案实现修改：

• 方案1：覆写内置本地化文案（推荐）
  MUI日期选择器的按钮文本属于本地化配置范畴，可通过LocalizationProvider或组件本身的localeText属性直接覆写对应文案，侵入性最低，不会破坏原有交互和样式：

  import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
  import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
  
  function Demo() {
    return (
      <LocalizationProvider
        dateAdapter={AdapterDateFns}
        localeText={{
          okButtonLabel: 'Apply', // 将默认OK文本替换为Apply
          cancelButtonLabel: 'Cancel' // 取消按钮文本也可按需自定义
        }}
      >
        {/* 开启弹窗模式的DatePicker组件 */}
        <DatePicker />
      </LocalizationProvider>
    )
  }
  

  如果需要全局生效，把localeText配置放在项目根节点的LocalizationProvider上即可，所有日期、时间类选择器的按钮文本会同步修改。

• 方案2：自定义操作栏（适合深度定制场景）
  如果除了修改文本，还需要调整按钮顺序、样式、新增额外操作项，可以通过插槽替换弹窗底部的默认操作栏：

  import { DatePicker, PickersActionBar } from '@mui/x-date-pickers';
  
  const CustomActionBar = (props) => {
    return (
      <PickersActionBar
        {...props}
        actions={[
          { text: 'Cancel', action: 'cancel' },
          { text: 'Apply', action: 'accept' } // 自定义确认按钮文本
        ]}
      />
    )
  };
  
  // 组件使用时传入自定义操作栏
  <DatePicker
    slots={{
      actionBar: CustomActionBar
    }}
  />
  

  注意：如果你使用v5及更早版本的MUI X Date Pickers，将上述代码中的slots属性替换为components即可，配置逻辑完全一致。

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