ReactでのスタイリングにおけるグローバルCSSの使用

私たちにはReactコンポーネント Appがあり、その中にdivがあり、 divの中に3つの段落があると仮定します：

App.jsfunction App() {
  return (
    <div>
      <p>テキスト</p>
      <p>テキスト</p>
      <p>テキスト</p>
    </div>
  );
}

このコンポーネントをスタイリングしましょう。 そのために、コンポーネントと同じsrcフォルダ内に、 タグ用のスタイルを持つ通常のCSSファイル styles.cssを作成します。

このファイルで、div用にスタイルを持つクラス class1を作成します：

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

次に、最初の段落用にスタイルを持つクラスclass2を追加します：

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

2番目の段落用にスタイルを持つクラスclass3：

styles.css.class3 {
  font-style: italic;
  color: brown;
}

最後に、最後の段落用にクラスclass4を作成します：

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

CSSファイルはこれで完了です。後は、 タグ用に記述したCSSスタイルを適用するだけです。 コンポーネントファイルApp.jsに戻りましょう。

最初に必ず行うべきことは、 ファイルの先頭にスタイルファイルstyles.cssのインポート行を追加することです：

App.jsimport './styles.css';

次に、コンポーネント内でファイルからCSSクラスを適用するために、 属性classを使用します。最初の段落にはクラスclass2がありました。 適用してみましょう：

App.js<p class="class2">テキスト</p>

同様に、残りのタグにもクラスを追加します。 結果として、次のコードが得られます：

App.js<div class="class1">
  <p class="class2">テキスト</p>
  <p class="class3">テキスト</p>
  <p class="class4">テキスト</p>
</div>