Create-React-App项目中CSS Modules的使用

项目开发

发布日期: 2020-09-01

更新日期: 2024-06-05

文章字数: 460

阅读时长: 2 分

概述

版本：react: ^16.13.1、node-sass: ^4.14.1

一、启用SCSS

安装node-sass

npm install node-sass --save

更改css文件后缀并引入
将.css文件后缀改为.scss，在.js或.jsx文件中引入。

import './App.scss';

二、启用CSS Modules

使用Create React App脚手架创建的项目默认支持CSS Modules，需要将模块化的css文件后缀改为.module.css或.module.scss，然后在.js或.jsx文件中引入。
示例代码：

import React, { Component } from 'react';
import styles from './Button.module.css'; // 引入模块化后的css文件
import './another-stylesheet.css'; // 引入普通样式文件

class Button extends Component {
  render() {
    return <button className={styles.error}>Error Button</button>;
  }
}

三、使用多个类名

在不使用CSS Modules时，我们给元素设置多个类名时通常使用join()或ES6模板字符串，这里给出使用CSS Modules时这两种形式的写法：

// 数组join()形式
<div className={[styles.menu_bar, styles.active].join(" ")}>Menu</div>

// ES6模板字符串形式
<div className={`${styles.menu_bar} ${styles.active}`}>Menu</div>

四、动态使用类名

有时需要根据某一个变量的值来动态决定类名，这里也同样给出join()及ES6模板字符串两种形式的写法：

// 数组join()形式
<div className={[styles.menu_bar, show?styles.active:''].join(" ")}>Menu</div>

// ES6模板字符串形式
<div className={`${styles.menu_bar} ${show?styles.active:''}`}>Menu</div>

五、使用公共样式

有时可能同时需要使用公共样式中的类名，这里也给出join()及ES6模板字符串两种形式的写法：

// 数组join()形式
<div className={['red_txt', styles.menu_bar, show?styles.active:''].join(" ")}>Menu<div>

// ES6模板字符串形式
<div className={`red_txt ${styles.menu_bar} ${show?styles.active:''}`}>Menu</div>