使用 Tailwind css 设计 Navlink
Posted
技术标签:
【中文标题】使用 Tailwind css 设计 Navlink【英文标题】:Styling Navlink using Tailwind css 【发布时间】:2021-06-22 01:38:00 【问题描述】:我正在尝试将 tailwind-css 添加到 Navlink(react-router-dom)。我想添加积极的风格。要添加活动样式,我可以使用
<NavLink to="/faq" activeStyle=fontWeight: "bold",color: "red">
FAQs
</NavLink>
有没有办法用tailwind-css做到这一点,我不想用css,也许是这样的?
<NavLink to="/faq" className=`$active?'font-bold text-red':'text-gray-900'...`>
FAQs
</NavLink>
【问题讨论】:
【参考方案1】:NavLink
组件有一个activeClassName
属性。
https://reactrouter.com/web/api/NavLink
【讨论】:
以上是关于使用 Tailwind css 设计 Navlink的主要内容,如果未能解决你的问题,请参考以下文章
NuxtJS + BootstrapVue + TailwindCSS:我可以有效地使用 Bootstrap Vue 组件,但使用 Tailwind CSS 样式?