ルーター コンストラクターで linkExactActiveClass
パラメーターを使用して、ナビゲーション バーでアクティブなリンクを強調表示してみました。
私の問題は、アクティブなクラスが CSS クラス リストの先頭に追加されることです。これは、他のクラスがそれをオーバーライドすることを意味します。
router-link
要素は次のようになります: クラスは実際に既存の CSS クラスの前に追加されます。これにより、黄色のテキストが text-white
クラスによって上書きされます。これを変更するにはどうすればよいですか?
P粉5174756702024-02-26 00:46:20
簡単な解決策は、tailwind を使用することです (documentation) を追加します
次のように使用してみてください:
const ルーター = createRouter({ 履歴: createWebHistory(process.env.BASE_URL), ルート、 linkExactActiveClass: '!text- yellow-500', });
通常、私はこのアプローチは好きではありませんが、他に簡単な選択肢はないと思います
PS: 少なくとも tailwind 2.1 と JIT mode
を使用していることを確認してください。