module.css文件即使分开也会发生冲突

Question

这是我的相关目录结构

└── src
├── App.css
├── App.js
├── components
│   ├── Intro.jsx
│   └── UnderConstruction.jsx
├── css
│   ├── Intro.module.css
│   └── UnderConstruction.module.css
├── images
│   ├── mascot.png
│   └── preview.png
├── index.js
└── pages
└── mainPageLinks
├── Blogs.jsx
├── Comics.jsx
└── Projects.jsx

我的Intro.jsx有这个

import styles from '../css/Intro.module.css';

我的UnderConstruction.jsx有

import styles from '../css/UnderConstruction.module.css';

MyUnderConstruction.module.csshas

h1{
margin:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
padding: 0 10%;
text-align:center;
}

奇怪的是，这个h1风格被应用到我的Intro.jsx文件，甚至没有导入UnderConstruction.module.css文件。我以为module.css文件是本地的。

Answer 1

基本上，module.css文件不能真正保持本地HTML标签分开，所以你需要给他们一些className。

在*.module.css文件中输入:

.someClassName{
...
}

在*.jsx文件中输入

import styles from './path/to/module/css/file';
.
.
.
<h1 className={styles.someClassName}>
Whatever
</h1>
.
.
.