使用import { App } from 'antd'; |
文档贡献者
message.xxx、Modal.xxx、notification.xxx 的静态方法，可以简化 useMessage 等方法需要手动植入 contextHolder 的问题。.ant-app 的默认重置样式，解决原生元素没有 antd 规范样式的问题。App 组件通过 Context 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
import React from 'react';import { App } from 'antd';const MyPage: React.FC = () => {const { message, notification, modal } = App.useApp();message.success('Good!');notification.info({ title: 'Good' });modal.warning({ title: 'Good' });// ....// other message, notification, modal static functionreturn <div>Hello world</div>;};const MyApp: React.FC = () => (<App><MyPage /></App>);export default MyApp;
注意：App.useApp 必须在 App 之下方可使用。
App 组件只能在 ConfigProvider 之下才能使用 Design Token，如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。
<ConfigProvider theme={{ ... }}><App>...</App></ConfigProvider>
<App><Space>...<App>...</App></Space></App>
// Entry componentimport { App } from 'antd';import type { MessageInstance } from 'antd/es/message/interface';import type { ModalStaticFunctions } from 'antd/es/modal/confirm';import type { NotificationInstance } from 'antd/es/notification/interface';let message: MessageInstance;let notification: NotificationInstance;let modal: Omit<ModalStaticFunctions, 'warn'>;export default () => {const staticFunction = App.useApp();message = staticFunction.message;modal = staticFunction.modal;notification = staticFunction.notification;return null;};export { message, notification, modal };
// sub pageimport React from 'react';import { Button, Space } from 'antd';import { message } from './store';export default () => {const showMessage = () => {message.success('Success!');};return (<Space><Button type="primary" onClick={showMessage}>Open message</Button></Space>);};
通用属性参考：通用属性
自
antd@5.1.0版本开始提供该组件。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| component | 设置渲染元素，为 false 则不创建 DOM 节点 | ComponentType | false | div | 5.11.0 |
| message | App 内 Message 的全局配置 | MessageConfig | - | 5.3.0 |
| notification | App 内 Notification 的全局配置 | NotificationConfig | - | 5.3.0 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
<App component={false}> 内不起作用请确保 App 的 component 是一个有效的 html 标签名，以便在启用 CSS 变量时有一个容器来承载 CSS 类名。如果不设置，则默认为 div 标签，如果设置为 false，则不会创建额外的 DOM 节点，也不会提供默认样式。