Я создаю DropdownMenu с помощью Shadcn вот так:
<DropdownMenu>
<DropdownMenuTrigger className = "outline-none">{displayName}</DropdownMenuTrigger>
<DropdownMenuContent className = "w-56 mr-10 bg-white text-black p-3 rounded">
<DropdownMenuGroup>
<DropdownMenuItem>
<span>Dashboard</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuSeparator/>
<DropdownMenuItem>
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
Я хочу сделать так, чтобы каждый DropdownMenuItem использовал курсор-указатель вместо курсора по умолчанию при наведении курсора на элемент. Я зашел в dropdown-menu.tsx и изменил DropdownMenuItem так, чтобы он использовал cursor-pointer в имени класса:
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref = {ref}
className = {cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...props}
/>
))
Однако курсор остается по умолчанию. По какой-то причине изменения className, которые я вношу в компонент Shadcn, не применяются. Я попытался перезапустить свой экземпляр разработки, а также перезапустить VSCode, но, похоже, ничего не работает. Мои изменения в других компонентах Shadcn работают, но не в dropdown-menu.tsx. Есть идеи, почему это не работает?
Выполнение className = "cursor-pointer" для каждого отдельного DropdownMenuItem работает, но в идеале мне бы хотелось, чтобы я мог применить его к самому DropdownMenuItem, а не только к его экземплярам.





Нашел в чем дело! Я импортировал все компоненты раскрывающегося списка из @radix-ui/react-dropdown-menu, а не из @/components/ui/dropdown-menu.