引入样式文件

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. 【状压dp】Hamiton路径

    描述 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamilton路径的定义是从 0 到 n-1 不重不漏地经过每个点 ...

  2. Atcoder Grand Contest 006 D - Median Pyramid Hard(二分+思维)

    Atcoder 题面传送门 & 洛谷题面传送门 u1s1 Atcoder 不少思维题是真的想不出来,尽管在 Atcoder 上难度并不高 二分答案(这我倒是想到了),检验最上面一层的数是否 \ ...

  3. mysql端口查看与修改-netstat命令使用

    linux上使用netstat察看mysql端口和连接 linux上使用netstat察看mysql端口和连接 近日发现写的一个java程序的数据库连接在大压力下工作不打正常,因此研究了一下dbcp, ...

  4. 如何利用nrfjprog.exe读写nrf51的flash

    版权声明:本文为博主原创文章,未经博主允许不得转载.   1.目的 为了方便平时在开发中的调试,验证一些想法是否正确. 2.平台: Jlink version:v5.02c nrf51822硬件板等. ...

  5. linux常用目录和文件解析

    1. 一级目录 /dev 设备目录 /etc 系统配置及服务配置文件.启动命令的目录 /proc 显示内核及进程信息的虚拟文件系统 /tmp 临时文件目录 /home 普通用户家目录 /root 超级 ...

  6. CSS3实现字体描边

    CSS3实现字体描边的两种方法 -webkit-text-stroke: 1px #fff;:不建议,向内描边,字体颜色变细,效果不佳: 用box-shadow模拟描边,向外描边,保留字体粗细,赞! ...

  7. javaSE高级篇1 — 异常与多线程基础

    1.异常的体系结构  注:Throwable是一个类,不是一个接口,这个类里面是描述的一些Error和Exception的共性,如图所示: 异常 / 错误是什么意思? 定义:指的是程序运行过程中,可能 ...

  8. Spark(九)【RDD的分区和自定义Partitioner】

    目录 spark的分区 一. Hash分区 二. Ranger分区 三. 自定义Partitioner 案例 spark的分区 ​ Spark目前支持Hash分区和Range分区,用户也可以自定义分区 ...

  9. Notepad++【远程操作linux文件】

    目录 目的 预期效果 操作步骤 1.打开插件 2.安装NppFTP 3.连接远程主机 注意 目的 通过Notepad++远程登录linux主机,修改配置文件 预期效果 在Notepad++上登录lin ...

  10. 【DFS与BFS】洛谷 P1135 奇怪的电梯

    题目:奇怪的电梯 - 洛谷 (luogu.com.cn) 因为此题数据范围较小,有dfs及bfs等多种做法. DFS 比较正常的dfs,注意vis数组一定要回溯,不然会漏情况 例如这个数据 11 1 ...