如何修改v5版MobileDatePicker组件的接受、取消按钮文本

v5 版本确实移除了 v4 时期组件直接接收的acceptLabel/cancelLabel属性，按钮文本修改统一收为两种实现路径，可根据使用场景选择：

方案1：通过 localeText 配置修改（官方推荐） #

这是最符合组件设计规范的方案，v5 所有 MUI X 系列组件的内置文案都统一通过localeText字段配置，支持全局统一配置和单组件单独配置两种粒度：

• 全局配置（所有日期/时间选择类组件生效）：在项目最外层的LocalizationProvider上传入对应文案键值即可

import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import AdapterDayjs from '@mui/x-date-pickers/AdapterDayjs';

function App() {
  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      localeText={{
        okButtonLabel: '确认', // 替换默认OK文本
        cancelButtonLabel: '取消' // 替换默认CANCEL文本
      }}
    >
      {/* 业务组件 */}
    </LocalizationProvider>
  )
}

• 单组件配置（仅对当前MobileDatePicker生效）：不需要改动全局Provider，直接给组件传localeText属性即可

<MobileDatePicker
  value={selectedDate}
  onChange={handleDateChange}
  localeText={{
    okButtonLabel: '选好了',
    cancelButtonLabel: '不选了'
  }}
/>

其他内置按钮比如「今天」「清空」的文案也可以在localeText对象里找到对应字段修改，不需要额外自定义组件。

方案2：通过ActionBar插槽完全自定义（适合复杂定制场景） #

如果除了改文本，还需要调整按钮样式、增减按钮、加额外交互逻辑，可以直接覆盖组件的actionBar插槽，完全接管操作栏渲染：

<MobileDatePicker
  value={selectedDate}
  onChange={handleDateChange}
  slots={{
    actionBar: ({ onAccept, onCancel }) => (
      <div className="custom-date-picker-action">
        <button className="cancel-btn" onClick={onCancel}>
          自定义取消按钮
        </button>
        <button className="accept-btn" onClick={onAccept}>
          自定义确认按钮
        </button>
      </div>
    )
  }}
/>

插槽props里会透出组件内部的确认、取消回调方法，直接绑定到自定义按钮上就能保留原有的组件交互逻辑，不需要自己额外处理值的同步。

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