React中MUI X Mobile Date Picker的“clear”文本修改及语言切换问题

嘿，我来帮你搞定MUI X Mobile DatePicker里的「clear」文本修改和语言切换问题！根据你的代码，我给你整理了两种实用的解决方案：

一、通过本地化配置切换语言（自动适配对应语言的“clear”文本） #

你已经在用LocalizationProvider配置俄语（ru）了，但要让语言生效，得确保安装并导入对应语言的本地化包，不然默认还是英文。具体步骤如下：

1. 先安装俄语本地化包（如果还没装的话）：

npm install @mui/x-date-pickers/locales
# 或者用yarn
yarn add @mui/x-date-pickers/locales

2. 修改代码，导入俄语本地化对象并配置到LocalizationProvider：

import { ruRU } from '@mui/x-date-pickers/locales';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';

<LocalizationProvider 
  locale={ruRU}  // 注意：新版MUI X用locale替代了旧的adapterLocale
  dateAdapter={AdapterDateFns}
>
  <MobileDatePicker
    inputFormat={"dd.MM.yyyy"}
    closeOnSelect={true}
    inputProps={{
      placeholder: "date",
      style : { fontWeight : "bold", color : "#555" }
    }} 
  />
</LocalizationProvider>

配置完成后，“clear”按钮会自动变成俄语对应的文本，完全贴合系统本地化逻辑。

二、手动自定义“clear”文本（强制替换成你想要的内容） #

如果不想用系统的本地化文本，想自己定义按钮文字（比如改成「清空」或者其他自定义内容），可以通过components属性覆盖默认的清除按钮组件：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import { IconButton } from '@mui/material';
import ClearIcon from '@mui/icons-material/Clear';

<LocalizationProvider 
  locale={ruRU}
  dateAdapter={AdapterDateFns}
>
  <MobileDatePicker
    inputFormat={"dd.MM.yyyy"}
    closeOnSelect={true}
    inputProps={{
      placeholder: "date",
      style : { fontWeight : "bold", color : "#555" }
    }}
    // 自定义清除按钮
    components={{
      ClearButton: ({ onClick }) => (
        <IconButton onClick={onClick} size="small">
          {/* 这里可以自定义文字或图标，按需调整 */}
          <span>清空</span>
          <ClearIcon />
        </IconButton>
      )
    }}
  />
</LocalizationProvider>

这样就能完全控制清除按钮的显示内容，文字、样式都能按照你的需求调整。

最后提个小提醒：新版MUI X已经把adapterLocale属性替换成locale了，建议用locale={ruRU}的写法，更符合最新的API规范哦。

备注：内容来源于stack exchange，提问作者spider5414