Result结果页的图标怎么自定义不生效？

设计师斯羽提问于 2026-03-22 00:56:21 阅读 199

组件

我在用 Ant Design 的 Result 组件，想换掉默认的成功/失败图标，但传了 icon 属性好像没反应。官方文档说支持 ReactNode，我就试了传个自定义的 Icon 组件进去。

比如这样写：<Result icon=<CustomIcon /> ... />，结果页面还是显示原来的图标，控制台也没报错，是我写法有问题吗？

我的 CustomIcon 是用 @ant-design/icons 里的组件包了一层：

const CustomIcon = () => (
  <SmileOutlined style={{ fontSize: '48px', color: '#52c41a' }} />
);

数据展示

我来解答赞 29 收藏

反馈

1 条解答

Mc.梓玥 Lv1

遇到这种问题别走弯路，我之前也掉进过这个坑。在 Ant Design 的 Result 组件里，icon 属性确实是要接受一个 ReactNode，但是有时候组件内部对传入的 icon 可能有额外的处理或者覆盖。

你的情况看起来应该是没问题的，但是可以试试直接传递 SmileOutlined 而不是包裹在 CustomIcon 里，看看会不会生效。有时候包装一层会导致一些不可见的问题。

你可以先尝试这样：

import { SmileOutlined } from '@ant-design/icons';



} ... />

如果这样可以，那可能就是你 CustomIcon 包装的问题。检查一下 CustomIcon 是否被正确导出或者有没有其他逻辑影响了它的渲染。如果还是不行，确保你的 Ant Design 版本是最新的，有时候版本问题也会导致一些奇怪的行为。

2026-03-22 01:00