所以我的问题是我已经阅读了文档,它说我的按钮应该是这样的:
<NavLink
style={({ isActive }) =>
isActive ? activeStyle : undefined
}
to="overview"
className="group flex items-center px-2 py-2 text-base font-medium rounded-md"
>
Overview
</NavLink>
我应该补充:
let activeStyle = {
textDecoration: "underline",
};
let activeClassName = "underline";
但问题是我正在使用 Tailwind,我不知道如何更改“let activeStyle”。我无法添加
let activeStyle = {
textDecoration: "bg-gray-900 text-white",
};
let activeClassName = "underline";
这是什么意思..有人可以帮忙吗?
如果我没记错的话,我相信 Tailwind 可以使用 CSS 类。逻辑应该应用于className
道具。
例子:
<NavLink
to="overview"
className={({ isActive }) =>
[
"group flex items-center px-2 py-2 text-base font-medium rounded-md",
isActive ? "bg-gray-900 text-white" : null,
]
.filter(Boolean)
.join(" ");
}
>
Overview
</NavLink>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句