我们知道,react
可以直接引用css
样式文件,如下:
//此为index.css的内容
.container {
background: red;
}
//此为index.js的内容,已省略其他不重要的代码
import './index.css';
<div className='container'></div>
这样引用有一个问题,如果有多个css
文件中有.container
,后引入的就会覆盖前面引入的,导致样式不可控。
因此react
提供了一种模块化引用css
样式文件的办法,只需把样式文件以.module.css
作为后缀即可,如下:
import styles from './index.module.css';
<div className={styles.container}'></div>
如果使用的是scss
(点我学习如何在react项目中使用scss),也可以用此方法,如下:
import styles from './index.module.scss';
<div className={styles.container}'></div>