如何在PrimeReact Tree组件中使用自定义图标？CSS引入无效如何解决？

PrimeReact Tree组件自定义图标不生效原因及解决方案 #

你之前用background-image方案不生效的核心原因是：PrimeReact Tree的icon字段会渲染为空的<i>标签元素，空行内元素默认没有宽高，无法撑开容器显示背景图。

方案1：使用content属性插入图标（已验证可行）

直接给自定义图标类设置content属性，直接在元素内插入图片资源，无需额外设置宽高即可正常渲染：

.m-icon {
  content: url("../images/module.png");
}

节点配置直接填写类名即可：

{
  "key": "0-0",
  "label": "Work",
  "data": "Work Folder",
  "icon": "m-icon" 
}

方案2：兼容background-image的调整方案

如果需要使用background-image实现图标（比如要做背景位置偏移、雪碧图适配等场景），需要给自定义类补充容器属性：

.myIcon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url('你的图标路径');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

注意事项

如果出现自定义样式被PrimeReact内置样式覆盖的问题，可以通过提升选择器权重解决，比如把类选择器写成.p-tree .myIcon，优先级会高于默认样式。

内容的提问来源于stack exchange，提问作者SamuelS