引入样式文件

import styles from './footer.module.css';
  • 注意: 样式文件名必须要以.module.css结尾

单类名设置

<div className={styles.channelLink}>联系我们</div>

多类名设置

  • 方法一
<div className={[`${styles.ftgLink}`,`${styles.width30}`].join(' ')}>
  • 方法二
<div className={`${styles.ftgLink} ${styles.width30}`}>

React使用css module和className多类名设置的更多相关文章

  1. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  2. Vue中scoped css和css module比较

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...

  3. React项目中 使用 CSS Module

    安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra.但是我们这里不需要安装 react-app-rewir ...

  4. react react使用css

    在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...

  5. React中css的使用

    网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...

  6. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

  7. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  8. 如使用Typescript撸Vue（Vue2 + TS +TSX+CSS module）

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...

  9. css module

    来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...

随机推荐

  1. Codeforces 627E - Orchestra（双向链表，思维题）

    Codeforces 题目传送门 & 洛谷题目传送门 下设 \(n,m\) 同阶. 首先有一个傻子都会的暴力做法,枚举矩形的上.下边界 \(l,r\),考虑集合多重集 \(S=\{y|x\in ...

  2. Python Cheatsheet

    Comprehensive Python Cheatsheet Download text file, Buy PDF, Fork me on GitHub or Check out FAQ. Con ...

  3. zabbix_get

    zabbix_get是一个命令行工具,可用于从一个远程的Zabbix探针获取监控数据. 1.2 用法 zabbix_get [-hV] [-s <host name or IP> ] [- ...

  4. 数据库命令补全工具mycli

    一.安装 我的数据库安装的是win版本,安装python后,直接命令行: 1 pip install mycli 即可. 二.使用 进入命令行后输入: 1 mycli -u root -p 88888 ...

  5. 非标准的xml解析器的C++实现：一、思考基本数据结构的设计

    前言: 我在C++项目中使用xml作为本地简易数据管理,到目前为止有5年时间了,从最初的全文搜索标签首尾,直到目前项目中实际运用的类库细致到已经基本符合w3c标准,我一共写过3次解析器,我自己并没有多 ...

  6. java输入代码

    import java.util.Scanner; public class Demo59 {    public static void main(String[] args) {        / ...

  7. 使用Redis实现令牌桶算法

    在限流算法中有一种令牌桶算法,该算法可以应对短暂的突发流量,这对于现实环境中流量不怎么均匀的情况特别有用,不会频繁的触发限流,对调用方比较友好. 例如,当前限制10qps,大多数情况下不会超过此数量, ...

  8. 【leetocode】55. Jump Game

    You are given an integer array nums. You are initially positioned at the array's first index, and ea ...

  9. 【leetcode】121. Best Time to Buy and Sell Stock（股票问题）

    You are given an array prices where prices[i] is the price of a given stock on the ith day. You want ...

  10. DP-Burst Balloons

    leetcode312: https://leetcode.com/problems/burst-balloons/#/description Given n balloons, indexed fr ...