在create-react-app中使用css modules的示例代码


Posted in Javascript onJuly 31, 2018

前言

如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一。
对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能。

配置弹出配置文件

如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样

在create-react-app中使用css modules的示例代码 

所以,第一步是将所有的配置文件弹出,在根目录运行以下代码

npm run eject

弹出之后的文件目录就先这样

在create-react-app中使用css modules的示例代码 

多了script与config两个文件夹

配置相关文件

打开config文件夹

在create-react-app中使用css modules的示例代码 

我们需要配置webpack.config.dev.js,如果需要将项目打包输出的话还得配置webpack.config.prod.js,不过两个文件配置方法是相同的,以webpack.config.dev.js为例。

搜索css-loader,找到这段代码

在create-react-app中使用css modules的示例代码 

如果没有配置css modules的话,options中是没有modules选项的,将其设置上即可

使用

我们以一个todo项目的list组件为例简单介绍一下在react中使用css modules。这个list组件就是一个ul将要做的事项列出来,效果如下

在create-react-app中使用css modules的示例代码 

吃饭、碎觉就是list组件的展示

先来看css怎么写,很简短的代码如下

.theList{
  list-style: none;
  padding-left: 0;
  width: 255px;
}

.theList li{
  color: #333;
  background: rgba(255,255,255,0.5);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  cursor: pointer;
}

文件名就叫TodoItem.css

jsx文件如下

import React from 'react';
import styles from './TodoItem.css';

class TodoItem extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    this.props.onDelete(e.target.getAttribute('name'));
  }

  render(){
    let todoEntries = this.props.entries;
    return (
      <!-- 引用样式 -->
      <ul className={styles.theList}>
        {todoEntries.map((item)=>{
          return (
            <li key={item.key} onClick={this.handleChange} name={item.key}>{item.text}</li>
          )
        })}
      </ul>
    )
  }
}

export default TodoItem;

这样,我们在控制台中查看

在create-react-app中使用css modules的示例代码 

在create-react-app中使用css modules的示例代码 

在create-react-app中使用css modules的示例代码 

相关className被编译成哈希字符串,而且在不同文件中引入哈希字符串并不相同

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
关于vue-router路径计算问题
May 10 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 #Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 #Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 #Javascript
vue导出html、word和pdf的实现代码
Jul 31 #Javascript
You might like
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python Django模板的使用方法
2016/01/14 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python定义类的简单用法
2020/07/24 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
若干个Java基础面试题
2015/05/19 面试题
小区门卫管理制度
2014/01/29 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
工程负责人任命书
2014/06/06 职场文书
行政管理专业求职信
2014/07/06 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
用python实现监控视频人数统计
2021/05/21 Python
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Python Numpy库的超详细教程
2022/04/06 Python
java版 联机五子棋游戏
2022/05/04 Java/Android