CSS Tailwind не применяется в компоненте Shadcn

Я создаю 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, а не только к его экземплярам.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
315
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Другие вопросы по теме