在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 相关文章推荐
Javascript数组与字典用法分析
Dec 13 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
vue项目中引入vue-datepicker插件的详解
May 14 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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
显示、隐藏密码
2006/07/01 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
linux 下实现python多版本安装实践
2014/11/18 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python数据集切分实例
2018/12/08 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
通过代码实例了解Python sys模块
2020/09/14 Python
如何利用python发送邮件
2020/09/26 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
公务员培训自我鉴定
2013/09/19 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
优秀班组长事迹
2014/05/31 职场文书
运动会口号8字
2014/06/07 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
Python anaconda安装库命令详解
2021/10/16 Python