`:after` 疑似要素をスタイル付きコンポーネントに正しく適用するための React.js ガイド

Question

この美しい下線アニメーションを発見しました

リーリー

上記のコードを NavItem コンポーネントに適用する必要があることはわかっています。アニメーションとすべては正常ですが、NavItem コンポーネントでは機能しているようですが、ナビゲーションバー全体では機能していないようです NavItem CSS とアプリケーション画像

私はメンバーになってから数時間しか経っていないので、ローカルホストでサイトを表示する正しい方法がわかりません。 5月の英語も申し訳ありません。 :)

Answer 1

css.modules を使用し、コンポーネントに className を追加することをお勧めします。まず、非常に簡単な CSS モジュールを作成します。次の手順を実行します： ＃＃＃

• コンポーネントと同じ場所に css ファイルを作成します: name.module.css、css のロジックを作成します
• このモジュールをコンポーネントにインポートします:
リーリー

(定数の名前はあなたが選択します)

• コンポーネントのタグに className を追加します:
リーリー

クラスに CSS コードが適用されているかどうかを確認します。