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

前言

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

配置弹出配置文件

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

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

npm run eject

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

多了script与config两个文件夹

配置相关文件

打开config文件夹

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

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

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

使用

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

吃饭、碎觉就是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;

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 中使用 CSS Modules优雅方法

    CSS Modules:局部作用域 & 模块化 CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了.如: /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样: /* button.css */ .button__button--d8fj3 { font-size: 16px; } .button__mini--f90jc { font-size

  • 在Create React App中使用CSS Modules的方法示例

    前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m

  • 简单明了带你了解CSS Modules

    简单明了带你了解CSS Modules

    层叠样式表 我们知道,css的全名叫做层叠样式表,这个"层叠"到底是什么意思呢? 有一种解释是,如果你先写了一条样式规则(选手1): .title { color: silver; } 然后又在后边写了一条类似的(选手2): .title { color: gold; } 因为名字相同,选手2就会和选手1打起来(让你丫冒充我!).结果是选手2获胜,class名为title的元素,最终的color值为gold. css里就像这样,随时可能一言不和就发生战争,结果输掉的一方就会被胜利的一方

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

    前言 如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一. 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能. 配置弹出配置文件 如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样 所以,第一步是将所有的配置文件弹出,在根目录运行以下代码 npm run eje

  • 在Create React App中启用Sass和Less的方法示例

    关于创建 create-react-app 项目请查看:create-react-app 的安装与创建 . 关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章: 在 Create React App 中使用 CSS Modules . 启用 Sass 语法编写 CSS create-react-app 脚手架中已经添加了 sass-loader 的支持,所以只需要安装 node-sass 插件即可 安装 node-sass

  • 在 React Native 中使用 CSS Modules的配置方法

    目录 安装依赖和配置 使用 示例 有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native.本文将介绍如何在 React Native 中使用 CSS Modules. 安装依赖和配置 首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式. yarn add react-native-sass-transformer sass -D 参考如下配置,修改 me

  • React Native中实现动态导入的示例代码

    React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • android 实现APP中改变头像图片的实例代码

    具体代码如下所示: package com.example.studyapplication.fragment; import android.app.Activity; import android.app.AlertDialog; import android.content.Context; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory

  • React Native 中实现确认码组件示例详解

    React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • react+zarm实现底部导航栏的示例代码

    react+zarm实现底部导航栏的示例代码

    目录 需要实现的效果 实现过程 1.使用 prop-types 库进行类型检查 2.使用 useNavigate 3.编写标签栏组件 4.使用标签栏组件 5.添加对应的页面路由 6.效果 参考资料 需要实现的效果 需要实现下面栏目固定,并且点击时切换到不同页面路由 实现过程 1.使用 prop-types 库进行类型检查 注意:自 React v15.5 起,React.PropTypes 已移入另一个包中.请使用 prop-types 库 代替. PropTypes 提供了使用不同验证器的例子

随机推荐