英文:
NavLink color is not changing using tailwind css
问题
<NavLink
to={item.link}
key={index}
className={({ isActive }) => (isActive ? "text-oirOrange" : ' ')}
>
<li className='cursor-pointer font-semibold text-oirBrown hover:text-oirOrange'>
{item.text}
</li>
</NavLink>
"oirOrange" 是我已经声明的颜色。
英文:
<NavLink
to={item.link}
key={index}
className={({ isActive }) => (isActive ? "text-oirOrange" : ' ')}
>
<li className='cursor-pointer font-semibold text-oirBrown hover:text-oirOrange'>
{item.text}
</li>
</NavLink>
The active nav link color should change, but it is not changing. "text-oirOrange" class is getting added to the html but it is not affecting.
"oirOrange" is color that I have already declared.
答案1
得分: 1
如果我正确理解您的问题/需求，您想要将"text-oiOrange"类添加到列表项（li）元素上，即实际显示的文本。您可以使用children渲染函数来实现这一点，将活动样式应用于li元素，而不是NavLink正在呈现的锚标签。
示例：
<NavLink to={item.link} key={index}>
{({ isActive }) => (
<li
className={[
"cursor-pointer font-semibold hover:text-oirOrange",
isActive ? "text-oirOrange" : "text-oirBrown"
].join(" ")}
>
{item.text}
</li>
)}
</NavLink>
英文:
If I understand the question/issue correctly you are wanting to add this "text-oiOrange" class to the list item (li) element, e.g. the text that is actually displayed. You can use the children render function for this to apply the active styling to the li element instead of the anchor tag that NavLink is rendering.
Example:
<NavLink to={item.link} key={index}>
{({ isActive }) => (
<li
className={[
"cursor-pointer font-semibold hover:text-oirOrange",
isActive ? "text-oirOrange" : "text-oirBrown"
].join(" ")}
>
{item.text}
</li>
)}
</NavLink>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论