为什么父css模块(App.js)中的css类会覆盖声明了自己的css模块的子css类

Question

我使用的是create-react-app最新版本2.1.3。我创建了一个演示应用程序来测试css模块，在create-rect应用程序2.1.3中，它应该是开箱即用的，不需要运行"npm弹出"或执行配置文件修改。但由于某些原因，在App-css模块文件中声明的样式会覆盖在子组件css模块文件中宣布的样式。

我使用生成的App.js作为嵌入另一个子组件Person.js(实现个人卡)的组件。这两个组件都使用css模块，并有各自对应的App.module.css和Person.module.chss css文件。这两个组件都有来自css模块的按钮元素及其独特的样式。但当我运行该应用程序时，我可以在chrome开发工具中看到Person的按钮样式被app.module.css文件中声明的按钮类穿透并禁用，我不明白为什么。css模块的全部目的是只向导入css样式的组件声明css样式。

应用程序.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.chss。应用程序按钮样式(即绿色背景)

chrome开发工具来说明问题

Answer 1

您只需要在css加载程序中添加query:｛modules:true｝，就可以将其用作webpack.config.js中的css模块，如以下示例

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
}
}
]
}
};