<Menu>组件配套Tree组件使用

          <Menu
            mode="inline"
                openKeys={[docIndex as string]}
                onOpenChange={_onOpenChange}
              >
                  <SubMenu
                    title={intl.formatMessage({ id: 'Product Doc' })}
                    key={'product'}
                  >
                    <Tree
                      // height={600}
                      blockNode
                      selectedKeys={
                        docIndex === 'product' ? selectedTreeNode : undefined
                      }
                      expandedKeys={
                        docIndex === 'product' ? openKeys : undefined
                      }
                      treeData={catalogTree}
                      showLine={{ showLeafIcon: true }}
                      onSelect={(selectedKeys, e) => {
                        if (e.selected) {
                          _selectTreeNode(selectedKeys, e, 'product');
                        }
                      }}
                      onExpand={(expandedKeys) => setOpenKeys(expandedKeys)}
                      fieldNames={{
                        title: 'catalogName',
                        key: 'id',
                        children: 'childList'
                      }}
                    />
                  </SubMenu>
                )}
                 </SubMenu>
                )}
              </Menu>

menu+Tree组件样式

 :global {
        .ant-menu {
          border-right: 0;
          width: 100%;

          .ant-menu-submenu {


            .ant-menu-submenu-title {
              border-bottom: 1px solid rgb(234, 234, 234);
              font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
              font-weight: 700;
              font-style: normal;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.85);
            }

            .ant-menu {
              .ant-tree {
                .ant-tree-treenode {
                  padding: 0 25px;
                  height: 30px;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  font-size: 14px;

                  .ant-tree-switcher {
                    background-color: unset;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }

                  .ant-tree-node-selected {
                    background-color: unset;
                  }
                }

                .ant-tree-node-content-wrapper {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  &:hover {
                    background-color: unset;
                    color: #0183CC;
                  }
                }


                .ant-tree-treenode.ant-tree-treenode-selected {
                  background-color: rgba(237, 248, 255, 1);

                  .ant-tree-node-selected {
                    color: #0183cc;
                  }
                }
              }
            }

            .ant-menu-submenu-arrow {
              color: rgb(174, 174, 174);
            }
          }

          .ant-menu-submenu-open>.ant-menu-submenu-title {
            color: rgb(1, 131, 204);
          }
        }
      }

menu切换方法

  const _onOpenChange = (keys: Array<string>) => {
    const latestOpenKey = keys.find((key) => [docIndex].indexOf(key) === -1);
    if (latestOpenKey) {
      setInnerSearchKey('');
      setDocSearchKey('');
    }
    setSelectedTreeNode([]);
    setDocIndex(latestOpenKey || undefined);
  };