[英]How can I use tailwind-css to style the active state of the Navlink(react-router-dom)?
I am trying to use a template literal for the className of the Navlink
but it does not work.我正在尝试为Navlink
的类名使用模板文字,但它不起作用。
This is current code:这是当前代码:
className={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${({ isActive }) => isActive ? "bg-red-500" : "bg-black-500"}`}
I tried using only the active part to check if anything else is messing with it but it still does not work.我尝试只使用活动部分来检查是否有其他东西干扰它,但它仍然不起作用。
className={`${({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}`}
Is there something wrong with the way I am using the template literal?我使用模板文字的方式有问题吗?
It works when I use this:当我使用它时它有效:
className={({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}
try this one.试试这个。 className={ px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive? "bg-red-500": "bg-black-500"}
className={ px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive? "bg-red-500": "bg-black-500"}
px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive? "bg-red-500": "bg-black-500"}
} px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive? "bg-red-500": "bg-black-500"}
}
The className
prop takes either a string or a function callback that is passed an isActive
prop and returns a string or undefined. className
道具采用字符串或function 回调,该回调传递isActive
道具并返回字符串或未定义。
declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); // <-- end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
Use the callback function to accept the isActive
prop and return a string containing the CSS classes you want to be applied.使用回调 function 接受isActive
属性并返回一个字符串,其中包含您要应用的 CSS 类。
className={({ isActive }) => [
"px-2 py-2.5",
"hover:bg-cprimary-300 hover:text-csecond-100",
"rounded-md transition",
isActive ? "bg-red-500" : "bg-black-500"
].join(" ")
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.