如何更改 MobileDatePicker 组件的接受和取消按钮文本答案

【问题标题】：how to change accept and cancel buttons text for the MobileDatePicker component如何更改 MobileDatePicker 组件的接受和取消按钮文本
【发布时间】：2022-08-13 00:47:03
【问题描述】：

@mui/x-date-pickers 包中的 MobileDatePicker 包含带有默认文本 OK/CANCEL 的接受/更改按钮。

在 v4 中，DatePicker 组件有一个 acceptLabel/cancelLabel 属性来更改按钮的文本，但我发现 v5 组件有类似的东西。

如何更改 v5 中按钮的文本？

标签： reactjs material-ui

【解决方案1】：

我终于通过编写自定义 ActionBar 组件来做到这一点

const MyActionBar = ({
  onAccept,
  onCancel,
  onClear,
  onSetToday,
}: PickersActionBarProps) => {

  return (
    <DialogActions>
      <Button onClick={onClear}> customCleanText </Button>
      <Button onClick={onCancel}> customCancelText </Button>
      <Button onClick={onAccept}> customAcceptText </Button>
    </DialogActions>
  );
};

并覆盖我的 MobileDatePicker 组件中的 bar 组件

<MobileDatePicker
  //...
  components: {{
    ActionBar: MyActionBar
  }}
  />

【讨论】：

【解决方案2】：

TLDR；我创建了一个demo，说明如何使用 Theme 或 LocalizationProvider 来实现这一点。

细节

如果您想在没有自定义组件的情况下执行此操作，您可以通过 Theme 或 LocalizationProvider 组件传递翻译。 documentation 不是很清楚，但如果您引用 PickersLocaleText 的来源，您会看到您想要的标签。对于 enUS 示例，您可以导入 enUS locale，然后提供您自己的字符串。

从文档的底部

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.

【讨论】：