用create-react-app创建的react项目,如何模块

2021-06-08  本文已影响0人  萤火虫叔叔

我们知道,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>
上一篇 下一篇

猜你喜欢

热点阅读