Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
class for Menu items and use custom JSX (4.20.0)
See original GitHub issueWhat problem does this feature solve?
Hi guys. please fix Menu items. In previous version (4.19.5), we could modifiy every single item in Menu and pass them our classes and conditions but in new version (4.20.0), we can’t modify and it is very annoying. In new version (4.20.0) we are totally locked up and we can’t modify Menu items. Please make it ( items={[]} ) optional without any ugly warning in console and allow to add classes and custom JSX to items. I used items as children because I used location.pathname for checking route and base on route, I map on routes array and show different menu with different classes in different conditions to the user.
What does the proposed API look like?
Please remove ugly warning from console and don’t remove children in next version. Thank you a lot. And I know here is not a good place to ask.
<Menu
theme="light"
mode="inline"
className="ml-bg-primary border-r-none"
defaultOpenKeys={[defaultOpen]}
>
{routesName.map((route: Readonly<INavigation>) => {
//! if we have a route with subMenu, this scope will execute
if (route.subMenu?.length) {
return (
<Menu.SubMenu
className={
route.subMenu.find((sub) => sub.path === location.pathname)
? collapsed
? "ml-text-secondary bg-white ml-menu-radius"
: "ml-text-secondary bg-white ml-menu-radius max-width-250"
: "ml-text-primary max-width-250"
}
key={route.path}
icon={route.icon}
title={route.title}
>
{route.subMenu.map((sub) => (
<Menu.Item
onClick={() => handleOpenSubMenu(route)}
className={
location.pathname === sub.path
? collapsed
? "ml-text-secondary bg-white ml-menu-radius subMenu-style"
: "ml-text-secondary bg-white subMenu-style"
: "ml-text-primary"
}
key={sub.id}
icon={sub.icon}
>
<Link
to={sub.path}
className={
location.pathname === sub.path
? "ml-text-secondary font-s-3"
: "ml-text-primary font-s-3"
}
>
{sub.name}
</Link>
</Menu.Item>
))}
</Menu.SubMenu>
);
} else {
return (
<Menu.Item
className={
`/${location.pathname.split("/")[1]}` === route.path
? collapsed
? "ml-text-secondary bg-white ml-menu-radius max-width-110"
: "ml-text-secondary bg-white ml-menu-radius max-width-250"
: "ml-text-primary"
}
key={route.id}
icon={route.icon}
>
<Link
to={route.path}
className={
`/${location.pathname.split("/")[1]}` === route.path
? "ml-text-secondary font-s-3"
: "ml-text-primary font-s-3"
}
>
{route.name}
</Link>
</Menu.Item>
);
}
})}
<Menu.Item
className="ml-text-primary max-width-250 without-style"
onClick={() => Alert("logout", "Do you want to logout?", handleLogout)}
key={999999}
icon={<LogoutOutlined style={{ fontSize: 25 }} />}
>
<span className="ml-text-primary font-s-3">Logout</span>
</Menu.Item>
</Menu>
🎉 This is my sidemenu code.
Issue Analytics
- State:
- Created a year ago
- Reactions:14
- Comments:20 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Sure, I’ve migrated this pretty hackish menu item
to
and this legacy and ugly code
to
This feature deviates strongly from the normal JSX pattern of embedding child nodes within other nodes as JSX components, and is inconsistent with how most of Ant Design itself handles child nodes. This caused me a great deal of confusion. I can’t find anywhere in the docs where it is documented that you can pass in custom JSX to the
labelkey. This is not standard in any other packages I am aware of. I would strongly suggest<Menu.Item>not be deprecated, and thatitemssimply be syntactic sugar for those who want it to internally generate a list of<Menu.Items>s.