我尝试为Navlink
的className使用模板文字,但它不起作用。
这是当前代码:
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"}`}
我试着只使用活动部分来检查是否有其他东西在干扰它,但它仍然不起作用。
className={`${({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}`}
我使用模板文字的方式有什么问题吗?
当我使用这个时它工作:
className={({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}
2条答案
按热度按时间kadbb4591#
className
prop接受字符串***或***传递isActive
prop并返回字符串或undefined的函数回调。参见NavLink
使用回调函数接受
isActive
prop并返回一个包含要应用的CSS类的字符串。doinxwow2#
请尝试以下方法。类名={
px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? "bg-red-500": "bg-black-500"}
}