在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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
详解Vite的新体验
Feb 22 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
phpwind中的数据库操作类
2007/01/02 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
XENON基于JSON变种
2010/07/27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
深入理解js generator数据类型
2016/08/16 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Tesserocr库的正确安装方式
2018/10/19 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
行政助理岗位职责
2013/11/10 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
安全资料员岗位职责
2013/12/14 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
报效祖国演讲稿
2014/09/15 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
刑事起诉书范文
2015/05/19 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS