reactjs - コンポーネントごとに必要な CSS だけをロードする方法 (React js)

Question

私は最初の React アプリのコーディングを開始しましたが、それは素晴らしいですが、コンポーネントごとに css ファイルを管理する方法がわかりません (そのため、実際の CSS は必要でない場合は読み込まれません)。

webpack に反応する (間違っている場合は訂正してください) は、アプリが必要なものだけを (JS に関して) いつでもロードするようにプロジェクトをラップします。

したがって、App2 つのボタンのみが表示されるメイン コンポーネントがあり、このコンポーネントの内部に別の 2 つのボタンがある場合:btn-01と、対応するボタンがクリックされるまで非表示になっている場合、これらのコンポーネントは、実際のボタンがクリックされます (私はこれを正しく理解していますか?) が、これは css と同じではありません。ボタンがクリックされます。btn-02component-01component-02btn-01component-01component-01component-02App

私はインライン スタイリングの大ファンではありませんが、 でテストしましたcss moduleが、この点では結果は同じです。したがって、これが簡単な方法で実装できるかどうかさえわかりません。

ここにコードがあるので、正しく実装していない可能性がありますが、非 DRY コードなどは気にしないでください。

ご覧のとおり、 と のスタイルはComponent-01、-02現時点では必要がなくても読み込まれます (ボタンが押されていません)。

App.js

import React, { Component } from "react";
import "./App.css";
import Component_01 from "./Component-01/Component-01";
import Component_02 from "./Component-02/Component-02";

class App extends Component {
  state = {
    isComponent_01: false,
    isComponent_02: false,
  };

  toggleComponent01 = () => {
    this.setState({
      isComponent_01: !this.state.isComponent_01,
    });
  };

  toggleComponent02 = () => {
    this.setState({
      isComponent_02: !this.state.isComponent_02,
    });
  };

  render() {
    let showComponent_01 = null;
    if (this.state.isComponent_01) {
      showComponent_01 = <Component_01 />;
    }

    let showComponent_02 = null;
    if (this.state.isComponent_02) {
      showComponent_02 = <Component_02 />;
    }

    return (
      <div className="App">
        <button className="btn-01" onClick={this.toggleComponent01}>
          Btn-01
        </button>
        <button className="btn-02" onClick={this.toggleComponent02}>
          Btn-02
        </button>

        {showComponent_01}
        {showComponent_02}
      </div>
    );
  }
}

export default App;

Component-01.js（そしてComponent-02.js、とだけ-02.js）

import React from "react";
import style from "./Component-01.module.css";

function App() {
  return <div className={style["component-01"]}>Component-01</div>;
}

export default App;