How Do I Style Shadcn-UI DropdownMenuPortal?

Question

I currently have the following dropdown menu using shadcn/ui:

<DropdownMenuGroup>
    <DropdownMenuSub>
        <DropdownMenuSubTrigger>
            <span>Submenu 1</span>
        </DropdownMenuSubTrigger>
        <DropdownMenuPortal className="z-[501]">
            <DropdownMenuSubContent className="bg-waybase mr-1.5 border-2">
                <DropdownMenuItem className="hover:opacity-75 focus:bg-waybase">
                    <Link
                        href="/submenu1/menu1"
                        className="text-white font-wayfinding w-full h-full"
                    >
                        Menu 1
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuItem className="hover:opacity-75 focus:bg-waybase">
                    <Link
                        href="/submenu1/menu2"
                        className="text-white font-wayfinding w-full h-full"
                    >
                        Menu 2
                    </Link>
                </DropdownMenuItem>
            </DropdownMenuSubContent>
        </DropdownMenuPortal>
    </DropdownMenuSub>
    <DropdownMenuItem className="focus:bg-waybus">
        <Link
            href="/submenu2"
            className="text-white font-wayfinding"
        >
            Submenu 2
        </Link>
    </DropdownMenuItem>
</DropdownMenuGroup>

In a page where there is a leaflet map (using React leaflet), this <DropdownMenuPortal /> gets obstructed by the leaflet map, so what I'm thinking is to set the portal z-index to higher than the leaflet. I've already done <DropdownMenuPortal className="z-[501]"/> but it doesn't work. I tried to put the z-index in another place but when I inspect my element in the browser, the tag that controls this z-index is the direct parent of <DropdownMenuSubContent />, so I assume it must be the Portal itself

Then, I tried to directly see the content of dropdown-menu.jsx and saw this for the portal:

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

and looking at other dropdown menu that has been modified by shadcn, I to do the same myself to the portal like:

const DropdownMenuPortal = React.forwardRef(({ className, ...props }, ref) => (
    <DropdownMenuPrimitive.Portal
        ref={ref}
        className={cn("z-[501]", className)}
        {...props}
    />
));
DropdownMenuPortal.displayName = DropdownMenuPrimitive.Portal.displayName;

but I don't see any differences.

Could someone guide me from here?

How Do I Style Shadcn-UI DropdownMenuPortal?

0 Answers0