引入样式文件

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. CF1562E Rescue Niwen!

    开始的时候只会一个\(O(n^2log)\) 即做出所有的\(n^2\)串,显然可以用\(SAM\)来进行这样一个排序,然后\(log\)做. 但这种题我们显然要找一些友好的性质: 我们发现字符串的比 ...

  2. Codeforces 1326F2 - Wise Men (Hard Version)（FWT+整数划分）

    Codeforces 题目传送门 & 洛谷题目传送门 qwq 这题大约是二十来天前 AC 的罢,为何拖到此时才完成这篇题解,由此可见我是个名副其实的大鸽子( 这是我上 M 的那场我没切掉的 F ...

  3. CF513G3 Inversions problem

    考虑记\(f_{i,j,k}\)为\(k\)次操作后,\(i,j\)位置被调换的概率. 那么我们考虑枚举我们要算的答案即\((x,y)\). 那么有\(\frac{n * (n + 1)}{2}\)种 ...

  4. Atcoder Grand Contest 020 E - Encoding Subsets（记忆化搜索+复杂度分析）

    Atcoder 题面传送门 & 洛谷题面传送门 首先先考虑如果没有什么子集的限制怎样计算方案数.明显就是一个区间 \(dp\),这个恰好一年前就做过类似的题目了.我们设 \(f_{l,r}\) ...

  5. Vue 中使用 extent 开发loading等全局 组件

    Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...

  6. 毕业设计之dns搭建：

    [apps@dns_sever ~]$ sudo yum install -y bind [apps@dns_sever ~]$ sudo vim /etc/named.conf // // name ...

  7. Django创建多对多表关系的三种方式

    方式一:全自动(不推荐) 优点:django orm会自动创建第三张表 缺点:只会创建两个表的关系字段,不会再额外添加字段,可扩展性差 class Book(models.Model): # ... ...

  8. MySQL插入大量数据探讨

    笔者想进行数据库查询优化探索,但是前提是需要一个很大的表,因此得先导入大量数据至一张表中. 准备工作 准备一张表,id为主键且自增: 方案一 首先我想到的方案就是通过for循环插入 xml文件: &l ...

  9. Shell 管道指令pipe

    目录 管道命令pipe 选取命令 cut.grep cut 取出需要的信息 grep 取出需要行.过滤不需要的行 排序命令 sort.wc.uniq sort 排序 假设三位数,按十位数从小到大,个位 ...

  10. Zookeeper之创建组，加入组，列出组成员和删除组

    public class CreateGroup implements Watcher { private static final int SESSION_TIMEOUT=5000; //ZooKe ...