在语义UI React中对齐菜单项和子菜单

问题描述

我试图弄清楚如何使子菜单与语义UI反应菜单组件中的菜单项正确对齐。

当前我的组件看起来像这样。

import React from "react";
import { Menu,Container,Dropdown } from "semantic-ui-react";

const menuStyle = {
  border: "none",borderRadius: 0,BoxShadow: "none",};

export const HeaderMenu = () => {
  return (
    <Menu pointing secondary borderless style={menuStyle} widths={5}>
      <Menu.Item>Home</Menu.Item>
      <Menu.Item link as="a" href="/about">
        About Me
      </Menu.Item>
      <Menu.Item link as="a" href="/contact">
        Contact
      </Menu.Item>
      <Menu.Item as="Menu">
        <Dropdown text="Projects" pointing className="link item">
          <Dropdown.Menu>
            <Dropdown.Item link as="a" href="/projects">
              All Projects
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item>Computer Science</Dropdown.Item>
            <Dropdown.Item>Other projects</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Menu.Item>

      <Menu.Item as="a"> Blog </Menu.Item>
    </Menu>
  );
};

渲染组件时，子菜单似乎与其余菜单项不符。实际大小可以，但我想将它们全部垂直对齐到中间。但是，添加verticalAlign: middle样式似乎没有任何作用。

输出（突出显示边距）：

解决方法

我设法通过强制子菜单包含一个padding: "0"值来解决此问题。我不确定这是否是最好的解决方案，因为它必须包含自定义CSS。