如何更改ant-design库结果消息中的图标？

Question

我正在为应用程序准备结果消息（React + Ant-desing + TypeScript）。在那里我应该将图标从默认图标更改为图标（根据我的设计文件从 ant-design 更改为自定义图标）。

带有自定义图标的屏幕

根据“ant design”的文档，有一种方法可以放置自定义图标。 [https://ant.design/components/result/#components-result-demo-customIcon%5C] 我用过。

但是状态为 403,404,500 的结果有另一个构建此结果消息的逻辑。他们为图标包装器提供了额外的类名，我无法将 Ant Design 中的图标重写为我自己的图标。

看起来是这样的 带有应更改的默认图标的屏幕

如果有人知道该怎么做？

我的结果代码你可以在这里看到

<Result
    status='403'
    icon={<Lock />}
    title='403'
    subTitle='Sorry, you are not authorized to access this page.'
    extra={
        <Button
            type='primary'
            className='submit_btn flex_center'
        >
            <ArrowCircleLeft />
            Back
        </Button>
    }
/>

<Result
    status='404'
    icon={<CloseCircle />}
    title='404'
    subTitle='Sorry, the page you visited does not exist.'
    extra={
        <Button
            type='primary'
            className='submit_btn flex_center'
        >
            <ArrowCircleLeft />
            Back
        </Button>
    }
/>

但是带有“icon”属性的行不起作用（ant-design 仍然默认保留 icon）

Answer 1

从5.21.6版本开始，图标和插图似乎为以下状态：403 | 404 | 404 500 | 500成功|警告|信息是硬编码的，您需要使用默认版本和

icon

参数来创建您自己的视觉效果。