Ant Design侧边栏父菜单选中颜色异常问题求助

使用Ant Design + ReactJS开发侧边栏菜单时遇到以下问题：

• 点击「Courses」的子项「All Courses」时，父菜单「Courses」默认变为绿色，与侧边栏背景色#2492EB重合，导致文字几乎不可见
• 期望子菜单被选中时，父菜单文字保持白色
• 已尝试Ant Design主题编辑器，未找到解决方法

问题截图 #

相关代码 #

侧边栏菜单配置 #

const adminSidebarItems: MenuProps["items"] = [
  {
    key: `/${role}/dashboard`,
    label: "Dashboard",
    icon: <MdOutlineDashboard />,
  },
  {
    key: `/${role}/students`,
    label: "Students",
    icon: <GoPeople />,
  },
  {
    key: `/${role}/courses`,
    label: "Courses",
    icon: <BsBook />,
    children: [
      {
        key: `/${role}/courses/`,
        label: "All Courses",
      },
    ],
  },
  {
    key: `/${role}/mentors`,
    label: "Mentors",
    icon: <IoPersonCircleOutline />,
  },
  {
    key: `/${role}/departments`,
    label: "Departments",
    icon: <LuFolders />,
  },
  {
    key: `/${role}/attendence`,
    label: "Attendence",
    icon: <PiIdentificationCard />,
  },
  {
    key: `/${role}/events`,
    label: "Events",
    icon: <BsCalendar2Event />,
  },
  ...defaultSidebarItems.slice(0, 1),
  {
    key: `/${role}/wallet`,
    label: "Wallet",
    icon: <HiOutlineCreditCard />,
  },
  {
    key: "/setting",
    label: "setting",
    icon: <IoSettingsOutline />,
  },
  ...defaultSidebarItems.slice(2),
];

仪表盘布局代码 #

const DashboardLayout = () => {
  const navigate = useNavigate();

  const { pathname } = useLocation();
  const [collapsed, setCollapsed] = useState(false);

  const { role } = getuser(userKey);

  const selectedKey =
    // @ts-ignore
    sidebarItems(role)?.find((item) => pathname.startsWith(item.key))?.key ||
    `/${role}/dashboard`;

  console.log(selectedKey);

  console.log(pathname);

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const handleMenuSelect = ({ key }: { key: string }) => {
    // setSelectedKey(key);
    if (key === "/logout") {
      removeUserInfo(userKey);
      navigate("/signin");
    } else {
      navigate(key);
    }
  };

  return (
    <ConfigProvider theme={sidebardThemes}>
      <Layout>
        <Sider
          width="220px"
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{
            backgroundColor: "#2492EB",
            height: "100vh",
            zIndex: 2,
            overflow: "auto",
            position: "fixed",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              height: "inherit",
            }}
          >
            <div className="demo-logo-vertical" />
            <div
              style={{
                backgroundColor: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "100px",
              }}
            >
              <img
                style={{
                  height: "40px",
                  width: "180px",
                }}
                src={logo}
                alt=""
              />
            </div>
            <Menu
              mode="inline"
              style={{
                backgroundColor: "#2492EB",
                color: "white",
                marginTop: "10px",
                flexGrow: 1,
                display: "flex",
                flexDirection: "column",
                paddingBlockEnd: "1rem",
                // height: "100%",
              }}
              selectedKeys={[pathname]}
              // defaultSelectedKeys={[sidebarItems[0].key]}
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              items={sidebarItems(role)}
              onClick={handleMenuSelect}
            ></Menu>
          </div>
        </Sider>

        <Layout>
          <Content
            style={{
              paddingTop: "130px",
              paddingLeft: collapsed ? "130px" : "270px",
              paddingRight: "50px",
              background: "#F6F8FA",
              overflow: "auto",
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

这个问题是Ant Design Menu组件默认会给选中子项的父节点添加激活样式导致的，以下是三种可行的解决方式：

方式1：自定义CSS覆盖样式 #

给Menu组件添加自定义类名，然后强制覆盖父节点激活时的文字颜色：

// 在Menu组件上添加className
<Menu
  className="custom-sidebar-menu"
  // 其他属性保持不变
>

添加对应的CSS：

.custom-sidebar-menu .ant-menu-submenu-active > .ant-menu-submenu-title {
  color: #fff !important;
}

方式2：通过主题配置修改 #

在你的sidebardThemes中直接指定子菜单父节点的激活文字颜色：

const sidebardThemes = {
  components: {
    Menu: {
      // 子菜单标题激活时的文字颜色
      submenuTitleActiveColor: '#fff',
    },
  },
};

方式3：调整selectedKeys匹配逻辑 #

当前selectedKeys={[pathname]}会让Ant Design自动关联父节点，你可以只让最底层的子项被标记为选中：

// 编写方法精确匹配当前路径对应的子项key
const getExactSelectedKey = () => {
  const findExactKey = (items: MenuProps['items']) => {
    for (const item of items) {
      if (item.children) {
        const childKey = findExactKey(item.children);
        if (childKey) return childKey;
      }
      if (item.key === pathname) {
        return item.key;
      }
    }
    return null;
  };
  return findExactKey(sidebarItems(role)) || `/${role}/dashboard`;
};

// 使用精确匹配的key作为selectedKeys
<Menu
  selectedKeys={[getExactSelectedKey()]}
  // 其他属性保持不变
>

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