mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 08:59:40 +08:00
db4ee53ffa
* feat : new components app * feat: update app * feat: update app * feat: update app * feat: update app * feat: update app * feat: update app * feat: update app * feat: update style * feat: update style * feat: update style * feat: add style * chore: code clean * feat: add prefixCls * chore: update snapshot * chore: update snapshot * chore: update snapshot * test: image test * Update components/app/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> * feat : update for reviewer * feat: update * feat: update * feat: update snap Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
1.2 KiB
1.2 KiB
category | subtitle | group | title | cover | demo | ||
---|---|---|---|---|---|---|---|
Components | 包裹组件 | 其他 | App | https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg |
|
新的包裹组件,提供重置样式和提供消费上下文的默认环境。
何时使用
- 提供可消费 React context 的
message.xxx
、Modal.xxx
、notification.xxx
的静态方法,可以简化 useMessage 等方法需要手动植入contextHolder
的问题。 - 提供基于
.ant-app
的默认重置样式,解决原生元素没有 antd 规范样式的问题。
代码演示
message
notification
modal
How to use
import React from 'react';
import { App } from 'antd';
const MyPage = () => {
const { message, notification, modal } = App.useApp();
message.success('Good!');
notification.info({ message: 'Good' });
modal.warning({ title: 'Good' });
// ....
// other message,notification,modal static function
return <div>Hello word</div>;
};
const MyApp = () => (
<App>
<MyPage />
</App>
);