Ant design 活动侧边栏菜单颜色问题

Question

在提供的图像和代码中，使用 Ant Design 和 ReactJS 创建了侧边栏菜单。然而，有一个简单的问题。 “课程”的下拉菜单有一个子项“所有课程”，单击“所有课程”时，父菜单（“课程”）颜色默认变为绿色。 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>
  );
};

Answer 1

如果您使用的是 Ant Design 版本 5，您可以使用 ConfigProvider 更改背景颜色，如本文档中所示：

https://ant.design/components/menu#design-token

<ConfigProvider
          key={"config-provider"}
          theme={{
            components: {
              Menu: {
                groupTitleColor: "rgb(0, 0, 0)",
                iconSize: 10,
                itemColor: "rgba(136, 140, 159, 1)",
                itemSelectedColor: "#3699FF",
                itemSelectedBg: "#1A1A27",
                itemActiveBg: "#1A1A27",

                itemHoverColor: "rgba(255, 255, 255, 1)",
                itemHoverBg: "rgba(26, 26, 39, 1)",

                subMenuItemBg: "rgba(30, 30, 45, 1)",
                subMenuItemBorderRadius: 0,

                itemBorderRadius: 0,
                itemMarginBlock: 0,
                itemMarginInline: 0,

                popupBg: "#1E1E2D",
                colorBgElevated: "#1E1E2D",
              },
            },
          }}
        >
// YOUR COMPONENTS HERE //
        </ConfigProvider>