引入样式文件

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. Spring Cloud Gateway过滤器精确控制异常返回(实战,完全定制返回body)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 Spring Cloud Gateway应用 ...

  2. 在Ubuntu上安装Docker Engine

    在Ubuntu上安装Docker Engine 这篇文章是介绍如何在在Ubuntu上安装Docker Engine,就是Google翻译官方文档的版本,英语好的直接官方原文.原文 要在Ubuntu上开 ...

  3. 【NOI导刊200908模拟试题02 题4】【二分+Dijkstra】 收费站

    Description 在某个遥远的国家里,有n个城市.编号外1,2,3,-,n. 这个国家的政府修建了m条双向的通路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定的 ...

  4. Codeforces 986C - AND Graph(dfs)

    Codeforces 题面传送门 & 洛谷题面传送门 考虑 DFS 一遍遍历每个连通块. 当我们遍历到一个点 \(x\) 时,我们就建立一个虚点 \((2^n-1-x)'\) 表示我们要访问 ...

  5. 洛谷 P6071 『MdOI R1』Treequery(LCA+线段树+主席树)

    题目链接 题意:给出一棵树,有边权,\(m\) 次询问,每次给出三个数 \(p,l,r\),求边集 \(\bigcap\limits_{i=l}^rE(p,i)\) 中所有边的权值和. 其中 \(E( ...

  6. 洛谷 P5331 - [SNOI2019]通信(CDQ 分治优化建图+费用流)

    题面传送门 首先熟悉网络流的同学应该能一眼看出此题的建模方法: 将每个点拆成两个点 \(in_i,out_i\),连一条 \(S\to in_i\),容量为 \(1\) 费用为 \(0\) 的边 连一 ...

  7. MEGAN4,MEGAN5和MEGAN6的Linux安装和使用

    目录 MEGAN 4 MEGAN 5 MEGAN 6 MEGAN(Metagenome Analyzer)是宏基因组学进行物种和功能研究的常用软件,实际上现在的Diamond+MEGAN6已经是一套比 ...

  8. python包之drmaa:集群任务管理

    目录 1. drmaa简介 2. 安装和配置 3. 示例 3.1 开始和终止会话 3.2 运行工作 3.3 等待工作 3.4 控制工作 3.5 查询工作状态 4. 应用 4.1 写一个简单应用 4.2 ...

  9. Pycharm的简单配置和使用

    外观 Ctrl+滚轮改变字体大小:file -> Setting ->Editor-〉General -> Mouse: 字体.颜色:file->settings->Ed ...

  10. JForum论坛安装以及部署

    转载链接:https://blog.csdn.net/jhyfugug/article/details/79467369 首先安装JForum之前,先准备好安装环境Windows7+JDK+Tomca ...