引入样式文件

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. 详解Threejs中的光源对象

    光源的分类 AmbientLight(环境光),PointLight(点光源),SpotLight(聚光源) 和 DirectionalLight(平行光)是基础光源 HemisphereLight( ...

  2. 洛谷 P5048 - [Ynoi2019 模拟赛] Yuno loves sqrt technology III(分块)

    题面传送门 qwq 感觉跟很多年前做过的一道题思路差不多罢,结果我竟然没想起那道题?!!所以说我 wtcl/wq 首先将 \(a_i\) 离散化. 如果允许离线那显然一遍莫队就能解决,复杂度 \(n\ ...

  3. R同时保存png/pdf等格式图片

    R怎么同时保存png/pdf等多种格式的图片? 如果是ggplot对象,用ggsave用两下就行,如果不是呢? png/pdf()组合dev.off()是通常保存方法,但一个组合只能保存一个图片.要想 ...

  4. cd-hit 去除冗余序列

    最近一篇NG中使用到的软件,用来去除冗余的contigs,现简单记录. CD-HIT早先是一个蛋白聚类的软件,其主要的特定就是快!(ps:不是所有快的都是好的) 其去除冗余序列的大概思路就是: 首先对 ...

  5. R包对植物进行GO,KEGG注释

    1.安装,加载所用到到R包 用BiocManager安装,可同时加载依赖包 source("https://bioconductor.org/biocLite.R") BiocMa ...

  6. Python基础之数字类型内置方法

    目录 1. 整型内置方法(int) 2. 浮点型内置方法 3. 常用操作 1. 整型内置方法(int) 用途:年龄,号码,等级等 定义: age = 18 常用操作 # 算数运算.比较运算 age = ...

  7. 27-Roman to Integer-Leetcode

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  8. 去空格及换行制表符【c#】

    string returnStr = tbxContractNO.Text.Replace("\n", "").Replace(" ", & ...

  9. 零基础学习java------37---------mybatis的高级映射(单表查询,多表(一对一,一对多)),逆向工程,Spring(IOC,DI,创建对象,AOP)

    一.  mybatis的高级映射 1  单表,字段不一致 resultType输出映射: 要求查询的字段名(数据库中表格的字段)和对应的java类型的属性名一致,数据可以完成封装映射 如果字段和jav ...

  10. JavaScript小数、百分数的转换

    百分数转化为小数 function toPoint(percent){ var str=percent.replace("%",""); str= str/10 ...