Unable to apply certain CSS-attributes to Radix components
I am working on a dropdown menu and text-based properties like
text-xl, font-medium were applied, but not bg-lime-400
Looking at the DOM I can see that bg-lime-400 is in the classname, but looking at the styles tab in dev tools I see no mention of background-color being applied or overridden.
Here is the code snippet in case it proves useful:
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Image
src={session.user.image}
width={64}
height={64}
className="rounded-full"
alt="Discord profile picture"
/>
</DropdownMenu.Trigger>
<DropdownMenu.Portal className="bg-lime-400">
<DropdownMenu.Content className="bg-lime-400 text-xl">
<DropdownMenu.Item className="bg-lime-400">
<Link href={`/${session.user.id}/lineups`}>
<a>Your Lineups</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item>
<Link href={`/create`}>
<a>Submit Lineup</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item>
<Link href={`/user/${session.user.id}`}>
<a>View Profile</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
<DropdownMenu.Item>
<Link href={`/api/auth/signout`}>
<a>Logout</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Image
src={session.user.image}
width={64}
height={64}
className="rounded-full"
alt="Discord profile picture"
/>
</DropdownMenu.Trigger>
<DropdownMenu.Portal className="bg-lime-400">
<DropdownMenu.Content className="bg-lime-400 text-xl">
<DropdownMenu.Item className="bg-lime-400">
<Link href={`/${session.user.id}/lineups`}>
<a>Your Lineups</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item>
<Link href={`/create`}>
<a>Submit Lineup</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item>
<Link href={`/user/${session.user.id}`}>
<a>View Profile</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
<DropdownMenu.Item>
<Link href={`/api/auth/signout`}>
<a>Logout</a>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
0 Replies