I can be a React component, multiple React components, or just some text.
}
/>
);
export default App;
```
### 平滑地卸载
平滑、自然的卸载提示。
```tsx
import React, { useState } from 'react';
import { Alert, Switch } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
const handleClose = () => {
setVisible(false);
};
return (
<>
{visible && (
)}
click the close button to see the effect
);
};
export default App;
```
### React 错误处理
友好的 [React 错误处理](https://zh-hans.react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) 包裹组件。
```tsx
import React, { useState } from 'react';
import { Alert, Button } from 'antd';
const { ErrorBoundary } = Alert;
const ThrowError: React.FC = () => {
const [error, setError] = useState();
const onClick = () => {
setError(new Error('An Uncaught Error'));
};
if (error) {
throw error;
}
return (
);
};
const App: React.FC = () => (
);
export default App;
```
### 自定义图标
可口的图标让信息类型更加醒目。
```tsx
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Alert } from 'antd';
const icon = ;
const App: React.FC = () => (
<>
);
export default App;
```
### 操作
可以在右上角自定义操作项。
```tsx
import React from 'react';
import { Alert, Button, Space } from 'antd';
const App: React.FC = () => (
<>
UNDO
}
closable
/>
Detail
}
/>
}
closable
/>
}
closable
/>
);
export default App;
```
### 组件 Token
自定义组件 Token。
```tsx
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Alert, ConfigProvider } from 'antd';
const icon = ;
const App: React.FC = () => (
);
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Alert 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Alert, Button, Flex } from 'antd';
import type { AlertProps, AlertSemanticType } from 'antd';
import { createStaticStyles } from 'antd-style';
const classNames = createStaticStyles(({ css }) => ({
root: css`
border: 2px dashed #ccc;
border-radius: 8px;
padding: 12px;
`,
}));
const styleFn: AlertProps['styles'] = ({ props: { type } }): AlertSemanticType['styles'] => {
if (type === 'success') {
return {
root: {
backgroundColor: 'rgba(82, 196, 26, 0.1)',
borderColor: '#b7eb8f',
},
icon: {
color: '#52c41a',
},
};
}
if (type === 'warning') {
return {
root: {
backgroundColor: 'rgba(250, 173, 20, 0.1)',
borderColor: '#ffe58f',
},
icon: {
color: '#faad14',
},
};
}
return {};
};
const App: React.FC = () => {
const alertSharedProps: AlertProps = {
showIcon: true,
classNames: {
root: classNames.root,
},
};
return (
Action}
/>
);
};
export default App;
```