在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS
简单介绍一下自己的使用:come on baby
介绍:css in js是使用js编写css统称,用来解决css样式冲突,覆盖等问题
css in js 的具体实现有50多种,其中两种是比较出名的:css modules和styled-components
在react中推荐使用:css modules,因为react脚手架已经集成进来了,可以直接使用
- css modules 通过对css类名的重命名,保证每一个类名的唯一性,从而避免样式冲突问题
- 实现方式:webpack的css-loader插件
- 在react脚手架中演化成:文件名,类名,hash(随机)三部分,只需要指定类名即可。
在index.module,css中我们写一个类名
.red{}
通过css modules就会给我们转化成类名
.Button_error_axy4s
css modules 在项目中的使用
1.首先创建一个名为index.module.css的样式文件,(这是react中约定的,与普通css区分开)
在要使用的文件中创建样式文件名称
index.module.css
2.在组件中导入样式文件(注意语法)
在要使用的文件在中进行引入
import styles from './index.module.css'
3.通过styles对象访问对象中的样式名来设置样式
<div className={styles.类名}></div>
注:我们在写项目的时候,避免不了使用ui组件,我们要想改变全局样式,需要通过:global()来进行设置
因为我们设置的类名已经发生改变,所以我们在改变组件中的样式时要使用组件中提供的类名
如:
:global(.am-navbar-title){
color:#333;
}
.map{padding-top: 45px;height: 100%;
}
.container{height: 100%;
}
在全局样式前面可以加上属于哪个类名之下,这样可以提高权重,避免覆盖组件类名的样式
.map :global(.am-navbar){margin-top: -45px;
}
这里是我写的index.module.css文件
在页面中就变成这样的类名
css modules
最后附带上css modules在github上的地址,大佬们请多指教
在react中使用css modules解决组件之间样式覆盖问题相关推荐
- reactjs css modules解决组件间样式覆盖问题
- [译] JavaScript 中的 CSS:基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
- less和sass支持 css modules 一样的局部环境和使用方式,解决重名样式覆盖的问题
安装 npm install --save-dev node-sass sass-loader css-loader: css-loader 会对 @import 和 url() 进行处理,就像 js ...
- React攻略秘籍二:React中使用css的五种方法(包括less与styled-compenents)
一.前言 相信学过vue与react的小伙伴们应该都知道react使用css是多么麻烦,他没有像vue一样的规定好的样式,没有给css规定的作用域这也就react中一个组件样式会出现干扰另外一个组件样 ...
- React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件 安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
- [react] 说说你对“在react中,一切都是组件”的理解
[react] 说说你对"在react中,一切都是组件"的理解 React采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX的语法声明组件的调用 React的虚拟DO ...
- Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
- vue 组件不受全局样式影响_Vue 组件之间样式冲突
Vue 组件之间样式冲突 vue 组件化,各组件内都可以在 style 部分写样式,这些样式却不是相互独立的,最终组合在一起,难免就会产生样式的污染. 首先来看一下两个 vue 组件代码: 1.Par ...
- React中的CSS——styled-components
一.认识CSS in JS 实际上,官方文档也有提到过CSS in JS这种方案: https://zh-hans.reactjs.org/docs/faq-styling.html "CS ...
最新文章
- [总结] 平衡树总结
- Azkaban与Oozie的区别及如何调度spark任务
- 无线 在linux叫什么地方,请问有知道atheros无线网卡Linux驱动官方下载地址是什么吗?...
- linux ubuntu软件中心,安装Lubuntu 软件中心
- 使用 pycharm安装各个模块
- 招聘 集群研发工程师
- Linux可插拔认证模块(PAM)的配置文件、工作原理与流程
- Easyui文件上传格式限制
- 应用程序现代化权威指南
- Cesium隐藏太阳、月亮、大气【图说GIS】
- 参考牛顿冷却定律优化最热问题的排序
- java如何输出省略号_关于java:此方法签名中的省略号(…)是什么?
- [轻笔记] SHAP值的计算步骤
- Day 5:自己编写的mysql类
- KBMMW-创建自定义服务
- 微信共享停车场小程序开发设计方案
- DevExpress 控件使用菜单栏之BarManager
- Mathcad的数组使用
- APP自动化基础之appium
- ABAP开发基础知识