处理css全局作用

现在有这样一个场景:
A页面和B页面都有一个相同的类名
我们在A页面中有引入css。
B页面没有css
在我们切换A和B页面的时候。
A页面的css也作用在了B页面。
我们只希望A页面的css不影响B页面。
怎么处理这样的问题了。
可以将css文件变成 xxx.module.css
其中的module是固定的

修改A页面

import React from "react";
// 引入css。添加了 module
import useStyle from './use.module.css'
// 输出的是一个对象
console.log('useStyle', useStyle);//useStyle {boxbox: 'use_boxbox__TAu6v'}
class Hello extends React.Component{
render() {
return (
// 这样就不会出现影响了
<div className={useStyle.boxbox}>
<p>我是A页面</p>
</div>
)
}
}
export default Hello

全局作用

/* 全局作用 */
:golbal(.box) {
background: pink;
}
尽量少使用标签选择器
因为标签选择器不会添加后缀
如ul{},div{}
最好是 .box ul{} .cont div{} 这样的

React中css的module的更多相关文章

  1. React中css的使用

    网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...

  2. react 中 css模块化类名 和普通全局类名 一起使用

    <div className={[`${styles.tableOpers}`,`clearfix`].join(' ')}></div>

  3. react中antd+css Module一起使用

    antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...

  4. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  5. React中使用CSS

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...

  6. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  7. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  8. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  9. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  10. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

随机推荐

  1. 教你实现一个朴实的Canvas时钟效果

    摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的. 本文分享自华为云社区<如何实现一个朴实无华的Canvas时钟效果>,作者: 北极光之夜.. 一. ...

  2. 源码详解数据结构Linked List

    摘要:java.util.LinkedList 是 Java 集合框架中的成员之一,底层是基于双向链表实现,集合容量可动态变化的. 本文分享自华为云社区<LinkedList 源码分析>, ...

  3. 中断操作:AbortController学习笔记

    前端面试一般喜欢问: 请手写一个带取消功能的延迟函数,axios 取消功能的原理是什么? 如何中断请求fetch的原理分析和应用? 在看来<使用 AbortController 终止 fetch ...

  4. 如何快速从 ETL 到 ELT?火山引擎 ByteHouse 做了这三件事

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言 当涉及到企业分析场景时,所使用的数据通常源自多样的业务数据,这些数据系统大多采用以行为主的存储结构,比如支付 ...

  5. Axure 页面交互

  6. PPT 商务报告,如何去表现客户LOGO

    PPT 商务报告,如何去表现客户LOGO LOGO 如何下载 LOGO 如何展示 矩阵排列 删除背景,变成白色 删除背景 设置透明度 AI 软件做成矢量图 LOGO 转色法

  7. 【Django drf】认证类 权限类 频率类 过滤类 排序类 分页类

    目录 认证类 前期准备 自定义认证类 配置认证类 全局配置 局部禁用 认证组件使用步骤 基于类中方法的认证(了解) 权限类 前期准备 重写has_permission() 添加权限不足信息 权限组件使 ...

  8. Android 启动优化(二) - 有向无环图的原理以及解题思路

    Android 启动优化(一) - 有向无环图 Android 启动优化(二) - 拓扑排序的原理以及解题思路 Android 启动优化(三) - AnchorTask 使用说明 Android 启动 ...

  9. AIGC加速迭代,云栖大会视频云「媒体服务」专场与你共话云智深度融合

    2023杭州·云栖大会 倒计时5天! 阿里云视频云 5大并行Session 11场话题演讲 深度演绎云智融合的全面进化 「媒体服务」Tech专场 重磅议题剧透来袭 01 「媒体服务」Tech • 新数 ...

  10. ACM:快读读入技巧

    快速读入:当数据输入较大时,比scanf快 inline int read(){ int s=0,w=1; char ch=getchar(); while(ch<'0'||ch>'9') ...