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

目录

1. 功能描述
2. 代码实现
3. 参考文档

一、功能描述

• 实现：
  • 如何启用SCSS？
  • 如何启用CSS Modules？
  • 如何在元素上使用多个类名？
  • 如何在元素上动态使用类名？
  • 如何同时使用外部公共样式？
• 版本： 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

  项目默认支持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>
  

三、参考文档

• Create React App | Adding CSS Modules