侧边栏项目的右边框在不同的浏览器中看起来不同。在我的情况下,Mozilla和Chrome。那么我该如何解决这个问题呢?
以下是来自Mozilla和Chrome的图片:
"use client";
import { cn } from "@/lib/utils";
import { LucideIcon } from "lucide-react"
import { usePathname, useRouter } from "next/navigation";
interface SidebarItemProps {
icon: LucideIcon;
label: string;
href: string;
}
export const SidebarItem = ({ icon: Icon, label, href }: SidebarItemProps) => {
const pathname = usePathname()
const router = useRouter()
const isActive =
(pathname === "/" && href === "/") ||
pathname === href ||
pathname?.startsWith(`${href}/`)
const onClick = () => {
router.push(href)
}
return (
<button
onClick={onClick}
type="button"
className={cn(
"flex items-center gap-x-2 text-slate-500 text-sm font-[500] pl-6 transition-all hover:text-slate-600 hover:bg-slate-300/20", isActive && "text-sky-700 bg-sky-200/20 hover:bg-sky-200/20 hover:text-sky-700"
)}
>
<div className="flex items-center gap-x-2 py-4">
<Icon
size={22}
className={cn(
"text-slate-500",
isActive && "text-sky-700"
)}
/>
{label}
</div>
{/* Right Active Border */}
<div
className={cn(
"ml-auto opacity-0 border-2 border-sky-700 h-full transition-all",
isActive && "opacity-100"
)}
/>
</button>
)
}
我希望在Mozilla和Chrome中看到相同的结果。
1条答案
按热度按时间dwbf0jvd1#
我认为你只需要从按钮类列表中删除“项目中心”
它给予按钮css的项目:center;覆盖默认显示:弹性体
默认情况下,fold-items具有值stretch,这意味着fold的项目将扩展到类似的高度