如何自定义MUI DatePicker操作栏的按钮标签？

你遇到的问题是因为直接用actions:['clear']时，组件没有正确应用你设置的中文本地化配置。可以通过两种方式解决：

方法一：自定义清除按钮文本 #

直接在actions数组里传入自定义配置对象，指定中文标签并绑定清除逻辑：

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='zh-cn'>
  <DatePicker
    value={value ? dayjs(value) : null}
    ref={ref}
    {...other}
    onChange={value => {
      setOpen(!open)
      onChange(value.format('YYYY-MM-DD'))
    }}
    slotProps={{
      textField: {
        InputProps: {
          endAdornment: <InputAdornment position='end'>
            {value && <IconButton onClick={() => onChange(null)}><CloseIcon/></IconButton>}
            <IconButton onClick={() => setOpen(!open)}><CalendarMonthIcon/></IconButton>
          </InputAdornment>
        }
      },
      actionBar:{
        // 替换原字符串配置为自定义对象
        actions: [{
          label: '清除',
          onClick: (props) => props.onClear() // 调用组件内置的清除方法
        }]
      }
    }}
    open={open}
  />
</LocalizationProvider>

方法二：完善MUI中文本地化配置 #

如果希望所有组件都自动使用中文，需要导入MUI的中文本地化包并配置到LocalizationProvider中：

首先导入中文本地化对象：

import { zhCN } from '@mui/material/locale';

然后修改LocalizationProvider的配置：

<LocalizationProvider 
  dateAdapter={AdapterDayjs} 
  adapterLocale='zh-cn'
  locale={zhCN} // 新增这一行
>
  <DatePicker
    // ...其他配置不变
    slotProps={{
      // ...其他配置
      actionBar:{
        actions:['clear'] // 现在会自动显示中文“清除”
      }
    }}
  />
</LocalizationProvider>

两种方法都能解决问题，方法一适合只修改单个组件的场景，方法二更适合全局统一中文的项目。

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