React CSSモジュールを使ったスタイリングの学習の続き

私たちのbuttonsアプリケーションの作業を続けましょう。 今回は、最初からsrcフォルダに生成されていたメインの コンポーネントAppを扱います。 ここには2つのdiv、見出し、そしてボタンがあります。

規則に従って、ファイル名App.cssを App.module.cssに変更し、 その内容をクリアして、いくつかの タグ用のCSSスタイルを持つクラスを作成します：

App.module.css.app {
  display: flex;
  flex-direction: column;
  width: 300px;
  border: 1px solid brown;
  padding: 10px;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 10px;
}

そして、ファイルApp.jsの内容をクリアします。 次に、ReactコンポーネントButtonsと、 App.module.cssからのスタイルをインポートします。 タグを書き、それらにスタイルを適用し、 ReactコンポーネントButtonsを配置します：

App.jsimport classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
  return (
    <div class={classes.app}>
      <h2 class={classes.title}>CSS Module Buttons</h2>
      <div class={classes.wrapper}>
        <Buttons />
      </div>
    </div>
  );
}
export default App;

App.module.cssからインポートするスタイルを含む オブジェクトの名前として、単語classesを使用しました。 前回の場合と同様に、このオブジェクトはお好きなように 名前を付けることができます。

あと少しのステップです。規則に従ってファイル名 index.cssをindex.module.cssに変更し、 ファイルindex.jsでインポート行の置き換えを 忘れないでください：

index.jsimport "./index.css";

次の行に：

index.jsimport "./index.module.css";

これで、ブラウザで私たちのアプリケーションの 動作結果を見ることができます。

ブラウザの開発者パネルで生成されたHTMLを 開くと、各コンポーネントに固有のクラスが 生成されているのがわかります。 これにより、個々のコンポーネントのクラス間の 衝突を心配する必要はもうありません。

また重要な点として、CSSモジュールは通常の 外部CSSファイルのインポートを禁止していません。