如何本地化MUI 5 DatePicker 自定义确认、取消等按钮文本

MUI 5 版本调整了日期组件的配置逻辑，v4 版本支持的okLabel、cancelLabel、clearLabel单独传参方式已废弃，所有操作按钮的文案统一通过localeText配置项控制。

具体实现方式 #

在包裹日期组件的LocalizationProvider上传入localeText属性，覆盖对应字段的默认值即可，三个按钮对应的配置字段如下：

• 确认（OK）按钮：okText
• 取消（Cancel）按钮：cancelText
• 清除（Clear）按钮：clearText

修改后的完整业务代码如下：

<LocalizationProvider 
  dateAdapter={AdapterJalali}
  localeText={{
    okText: "تأیید",
    cancelText: "لغو",
    clearText: "پاک کردن"
  }}
>
  <DatePicker
    displayStaticWrapperAs="desktop"
    closeOnSelect={true}
    label="تاریخ:"
    mask="____/__/__"
    value={selectedDate}
    onChange={handleDateChange}
    views={["year", "month", "day"]}
    renderInput={(params) => (
      <TextField {...params} />
    )}
  />
</LocalizationProvider>

补充说明 #

• 该配置对所有同LocalizationProvider下的日期类组件（DatePicker、TimePicker、DateTimePicker等）全局生效
• 如果需要给单个组件单独设置按钮文案，可以直接把localeText属性传给对应日期组件，优先级高于全局配置

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