NavLink利用時の問題点
・通常時のテキストカラーは黒
・アクティブ時はテキストカラーが白、背景色は黒
以上のようにスタイリングを行いたい場合、
activeClassName
を使用てもスタイリングが
上書きされない
。
react.jsx
<NavLink
className={`inline-block px-4 py-2 rounded-full font-semibold text-sm text-black`}
activeClassName={`bg-black text-white`}
to={`/blogs/${user.uid}`}
</NavLink>
a.activeと指定することで、activeが付与された際のスタイリングを当てることが可能。
また、その際はNavLinkのactiveClassNameは使用しないので削除してOK。
react.jsx
// 通常時（inactive）のスタイリングがベースとなる
<NavLink
className={`inline-block px-4 py-2 rounded-full font-semibold text-sm text-black`}
to={`/blogs/${user.uid}`}
</NavLink>
Conflicting className precedence rules #1010
Tailwindドキュメントのindex.css