ConfigProvider
Configure locale messages and custom icons globally.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Configure locale messages and custom icons globally.
When to use
- You want to use other languages than English
- You want to use your own icon set instead of
antd-mobile-icons
Demos
ConfigProvider
Props
| Name | Description | Type | Default |
|---|---|---|---|
| locale | Locale messages | Locale | zh-CN |
| checkList | CheckList config | { activeIcon?: ReactNode } | - |
| collapse | Collapse config | { arrowIcon?: ReactNode | ((active: boolean) => ReactNode) } | - |
| dropdown | Dropdown config | { arrowIcon?: ReactNode } | - |
| form | Form config | { helpIcon?: ReactNode } | - |
| input | Input config | { clearIcon?: ReactNode } | - |
| list | List config | { arrowIcon?: ReactNode } | - |
| navBar | NavBar config | { backIcon?: ReactNode } | - |
| noticeBar | NoticeBar config | { icon?: ReactNode, closeIcon?: ReactNode } | - |
| popup | Popup config | { closeIcon?: ReactNode } | - |
| result | Result config | { successIcon?: ReactNode, errorIcon?: ReactNode, infoIcon?: ReactNode, waitingIcon?: ReactNode, warningIcon?: ReactNode } | - |
| searchBar | SearchBar config | { searchIcon?: ReactNode } | - |