在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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery插件开发汇总
May 15 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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入门基础之php代码写法
2011/12/30 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php新建文件的方法实例
2019/09/26 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue实现搜索功能
2019/05/28 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python 批量修改/替换数据的实例
2018/07/25 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
什么是数据抽象
2016/11/26 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
行政介绍信范文
2015/05/04 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers