如何自定义Ant Design Result组件的图标样式？

♫东景提问于 2026-02-07 00:02:26 阅读 178

组件

在项目中使用Ant Design的Result组件时，想把默认图标换成自定义图片，但直接改icon属性里的标签后图片不显示，试过用CSS覆盖样式也没效果，该怎么办？

代码这样写的：icon={}，但控制台提示标签不允许出现在Result组件里


<Result
  status="success"
  title="操作成功"
  icon={}
/>

后来尝试用CSS写.ant-result-icon { background-image: url(...) }，但样式被组件的内联样式覆盖了

我来解答赞 11 收藏

反馈

2 条解答

晏鸣的笔记 Lv1

试试这个，Result组件的icon属性不支持直接传标签，用status="success"配合自定义图标会被覆盖。直接用status={null}然后自己写icon：

<Result

  status={null}

  title="操作成功"

  icon={<img src="/path/to/your/icon.png" style={{width: 64, height: 64}} />}

/>

2026-02-10 10:06

皇甫敏涵 Lv1

试试用icon属性直接传入img标签，用require引入图片路径

<Result

  status="success"

  title="操作成功"

  icon={<img src={require('./your-icon.png')} alt="custom icon" />}

/>

用内联样式改图标区域背景图也可以，但要注意层级和覆盖问题，可能需要加!important

2026-02-07 00:13