Почему класс css внутри родительского css-модуля (App.js) переопределяет дочерний класс css, у которого объявлен собственный css-модуль?

Question

Я использую последнюю версию create-Reaction-app 2.1.3. Я создал демонстрационное приложение для тестирования модулей CSS, которое в create-реагировать на приложение 2.1.3 должно быть готовым к работе без необходимости запускать "npm eject" или выполнять изменения файла конфигурации. Но по какой-то причине стили, объявленные в файле css-модуля приложения, переопределяют стили, объявленные в файле css-модуля дочернего компонента.

Я использую сгенерированный App.js как компонент, который встраивает другой дочерний компонент с именем Person.js (который реализует карточку персонажа). Оба компонента используют css-модули и имеют свои собственные соответствующие файлы css App.module.css и Person.module.css. оба компонента имеют элементы кнопок со своими уникальными стилями из css-модуля. но когда я запускаю приложение, я вижу в инструментах разработчика Chrome, что стиль кнопок Person зачеркнут и отключен классом кнопок, объявленным в файле App.module.css, и я не могу понять, почему. вся цель css-модуля - объявить стили css только компоненту, который их импортирует.

App.js

import React, { Component } from "react";
import Person from "./Person/Person";
import styles from "./App.module.css";

class App extends Component {
   state = {
   persons: [
      { id: "abcd", name: "John Do", age: 41 }
   ],
   someOtherState: "Some other state",
   showPersons: false
  };

  togglePersonsHandler = () => {
    this.setState({
      showPersons: !this.state.showPersons
    });
  };

  render() {
    let persons = null;
    let btnClass = "";
    if (this.state.showPersons && this.state.persons.length > 0) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return (
              <Person
                key={person.id}
                name={person.name}
                age={person.age}
              />
            );
          })}
        </div>
      );

      btnClass = styles.red;
    }

    const classes = [];
    if (this.state.persons.length <= 2) {
      classes.push(styles.red);
    }

    if (this.state.persons.length <= 1) {
      classes.push(styles.bold);
    }

    return (
      <div className={styles.App}>
        <h1> Hi, I'm a react app </h1>
        <p className={classes.join(" ")}>This is a paragraph!!!</p>
        <button
          className={btnClass}
          onClick={this.togglePersonsHandler} 
        >
          Toggle Persons
        </button>
        {persons}
      </div>
    );
   }
}

export default App;

App.module.css

.App {
  text-align: center;
}

.red {
  color: red;
}

.bold {
  font-weight: bold;
}

.App button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
}

Person.js

import React from "react";
import styles from "./Person.module.css";

const person = props => {
  return (
    <div className={styles.Person}>
      <p onClick={props.click}>
        I'm {props.name} and i'm {props.age} years old.
      </p>
      <p>{props.children}</p>
      <input type="text" onChange={props.changed} value={props.name} />
      <button className={styles.personBtn}>Click Me</button>
    </div>
  );
};

Person.module.css

.Person {
  width: 60%;
  margin: 16px auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 16px;
  text-align: center;
}

.personBtn {
  background-color: blue;
}

Я ожидаю, что кнопка внутри компонента Person должна иметь синий цвет фона, как определено в Person.module.css, но фактический результат заключается в том, что они получают стиль кнопки App.module.css.App (т.е. зеленый фон).

Chrome Dev инструменты для иллюстрации проблемы

Answer 1

Вам просто нужно добавить запрос: { modules: true } в css-loader, чтобы использовать его в качестве CSS-модулей в вашем webpack.config.js, как в этом примере

webpack.config.js

const path = require("path");

module.exports = {
  entry: ["./src/whatever.js"],

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "engine.js"
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /(node_modules)/,
        query: {
          presets: ["es2015", "stage-2"]
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader"
      },
      {
        test: /\.css$/,
        loader: "css-loader",
        query: {
          modules: true
        }
      }
    ]
  }
};