如何禁用ShadCN ModeToggle下拉菜单的聚焦环？

首先明确：ShadCN的下拉菜单（DropdownMenu）组件的聚焦环由Tailwind的ring系列样式控制，并非bg:accent这类属性，你之前的调整方向不对。下面是几种可行的解决方法：

方法一：组件内直接覆盖聚焦样式 #

找到ModeToggle中的DropdownMenuTrigger或DropdownMenuContent组件，添加focus:ring-0或focus:outline-none类禁用聚焦环：

<DropdownMenuTrigger className="focus:ring-0 focus:outline-none">
  {/* 你的切换按钮内容 */}
</DropdownMenuTrigger>

<DropdownMenuContent className="focus:ring-0 focus:outline-none">
  {/* 下拉菜单项 */}
</DropdownMenuContent>

方法二：修改组件默认配置 #

若不想每次手动加类，可在ShadCN组件配置文件（如components/ui/dropdown-menu.tsx）中，给对应元素添加禁用聚焦环的类：

const DropdownMenuTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentPropsWithoutRef<typeof Button>
>(({ className, ...props }, ref) => (
  <Button
    ref={ref}
    variant="ghost"
    size="icon"
    className={cn("focus:ring-0 focus:outline-none", className)}
    {...props}
  />
));

方法三：全局调整（不推荐） #

若想全局关闭DropdownMenu的聚焦环，可在Tailwind配置文件的theme.extend中添加自定义样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      '@layer components': {
        '.dropdown-menu-trigger': {
          '&:focus': {
            ring: '0',
            outline: 'none',
          },
        },
      },
    },
  },
};

之后给DropdownMenuTrigger加上该类即可。

注意：聚焦环是无障碍设计的一部分，完全禁用可能影响键盘导航用户体验。若只是样式问题，也可调整ring-color、ring-width修改聚焦环样式，而非完全禁用，例如：

<DropdownMenuTrigger className="focus:ring-blue-500 focus:ring-1">

内容的提问来源于stack exchange，提问作者Erik