【Antd Pro V5菜单动态生成，二级菜单图标未显示问题】

乖稳我-

于 2024-06-28 15:56:29 发布

阅读量559

点赞数 6

分类专栏：前端文章标签： react 前端前端框架

本文链接：https://blog.csdn.net/m0_46268808/article/details/140044455

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Antd Pro V5菜单动态生成，二级菜单图标未显示问题

> 这边项目使用的是阿里巴巴矢量图标库作为菜单图标的，需注意

问题示例

在这里插入图片描述

解决方案

官方issue 搜索

https://github.com/ant-design/ant-design-pro/issues/10178

在这里插入图片描述

// 二级icon
menuItemRender: (menuItemProps, defaultDom) => {
  if (menuItemProps.isUrl || !menuItemProps.path) {
    return defaultDom;
  }
  return (
    <Link to={menuItemProps.path}>
      {menuItemProps.pro_layout_parentKeys &&
        menuItemProps.pro_layout_parentKeys.length > 0 &&
        menuItemProps.icon}
      {defaultDom}
    </Link>
  );
},

使用配置后还是存在问题，问题示例

在这里插入图片描述

最终解决方案

将图标库的css资源引入到项目中
- 下载样式文件，进行解压
- 解压后将资源文件放到项目的src目录下
- 在app.tsx文件中引入样式文件
```
import './iconfont/iconfont.css';
```

重写菜单渲染配置

    // 二级icon
    menuItemRender: (menuItemProps, defaultDom) => {
      if (menuItemProps.isUrl || !menuItemProps.path) {
        return defaultDom;
      }
      const iconClassName = menuItemProps.icon ? `iconfont ${menuItemProps.icon}` : null;
      return (
        <Link to={menuItemProps.path} style={{ display: 'flex', alignItems: 'center' }}>
          {menuItemProps.pro_layout_parentKeys && menuItemProps.pro_layout_parentKeys.length > 0 && iconClassName && (
            <span className={iconClassName} style={{ marginRight: 8 }} />
          )}
          {defaultDom}
        </Link>
      );
    },