MUI X Date Picker组件okText与cancelText属性不生效如何解决

@mui/x-date-pickers@5.0.0-alpha.7属于早期测试版本，okText、cancelText作为组件一级属性的透传逻辑还未开发完成，直接在MobileDatePicker根节点上设置这两个属性不会被内部组件接收，因此配置不生效。

以下两种方案完全符合React开发规范，无需操作DOM即可实现自定义按钮文案的需求：

5.x全版本（包括alpha分支）的操作按钮文案默认从本地化配置中读取，通过LocalizationProvider传入自定义文本即可生效，不会破坏组件原有渲染逻辑。

import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
// 根据实际使用的日期库引入对应adapter，支持dayjs/date-fns/moment等
import DateAdapter from '@mui/lab/AdapterDayjs';
import TextField from '@mui/material/TextField';

// 自定义需要覆盖的按钮文案
const customPickerLocale = {
  okButtonLabel: 'Confirm',
  cancelButtonLabel: 'Close'
};

// 用LocalizationProvider包裹目标组件，传入自定义配置
<LocalizationProvider dateAdapter={DateAdapter} localeText={customPickerLocale}>
  <MobileDatePicker
    label="custom date"
    inputFormat="DD/MM/YYYY"
    value={this.state.formData.date}
    onChange={this.handleChange}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

如果项目中所有日期选择器都需要统一按钮文案，把LocalizationProvider放在应用根节点即可全局生效。

如果仅需要修改当前这一个MobileDatePicker的按钮文案，可以通过componentsProps把文案直接透传给内部的操作栏组件，不需要额外包裹Provider。

<MobileDatePicker
  label="custom date"
  inputFormat="DD/MM/YYYY"
  value={this.state.formData.date}
  onChange={this.handleChange}
  renderInput={(params) => <TextField {...params} />}
  // 向内部ActionBar组件透传按钮配置
  componentsProps={{
    actionBar: {
      // 按数组顺序指定要显示的按钮
      actions: ['cancel', 'accept'],
      cancelText: 'Close',
      acceptText: 'Confirm'
    }
  }}
/>

注意：alpha版本中操作栏的确认按钮对应的属性名是acceptText，不是正式版的okText，属性名写错会导致配置不生效。

两种方案均使用组件官方暴露的配置入口，走React正常的props传递和渲染流程，不存在直接操作DOM带来的异步时序问题、渲染冲突问题，稳定性远高于原生JS修改DOM的实现。5.0正式版本发布后，才支持直接在MobileDatePicker根节点上设置okText、cancelText属性。

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