解决Antd使用日期时间类组件中文（汉化）无效果问题

踩坑问题

使用Antd组件库开发时用到一些日期时间类等的组件显示的英文，因为官网本身提供的是英文版本的，我们需要将其修改为中文版。

如果所示，日期显示的是英文版本的

使用官网文档的国际化配置，我们进行配置但是仍没有效果。

解决方案

首先先下载dayjs依赖

npm install dayjs    #npm下载方式

pnpm add dayjs       #pnpm下载方式

yarn add dayjs       #yarn下载方式

依赖下载之后在App.tsx文件里面引入

import { ConfigProvider } from 'antd'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import zhCN from 'antd/locale/zh_CN'
dayjs.locale('zh-cn')

使用ConfigProvider 组件并使用local = {zhCN}

完整代码

import './App.css'
import { Button, DatePicker } from 'antd'
//    新加的
import { ConfigProvider } from 'antd'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import zhCN from 'antd/locale/zh_CN'
dayjs.locale('zh-cn')
function App() {
  return (
    //使用ConfigProvider组件
    <ConfigProvider locale={zhCN}>
      <div className="App">
        <DatePicker></DatePicker>
      </div>
    </ConfigProvider>
  )
}

export default App

这样就成功的实现汉化了。