react样式的私有化方法

由于react的样式管理是比较弱的，官方是建议把style直接写到jsx标签里

当然这种处理的方式显然不是特别适合,这样就造成了样式与标签耦合在一起了,我们知道在VUE中的利用scoped做到了样式私有化,react的样式私有化有以下几种处理方法:

1.利用css module来解决

这里有一篇关于css modoule的文章

1.1 在create-react-app中使用css modules的方法

import React from 'react';
//注意App.module.css中多了一个module关键字
import style from './App.module.css';export default () => {return (<h1 className={style.title}>Hello World</h1>);
};

而在css的命名必须为: App.module.css

.title {font-szie: 50px;
}

这样就可以在代码中使用了,编辑结果形式如下图:

而css module的做法就是:

产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

1.2 构建的webpack实现css Module

此时在react中的引入是一样的,但是css样式文件名不需要再加上module关键字了,但是需要webpack配合:

// App.css: .title {font-szie: 50px;
}

webpack代码:

上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。而

localIdentName=[path][name]---[local]---[hash:base64:5]

这句的含义是定制hash后样式类名的名字,这样就不会出现很难理解的类名了,具有一定的语义性

module.exports = {entry: __dirname + '/index.js',output: {publicPath: '/',filename: './bundle.js'},module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query: {presets: ['es2015', 'stage-0', 'react']}},{test: /\.css$/,loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"},]}
};

2. 在外层套上自己的类名

套上自己的类名,做到隔离实现css私有化

index.css
.a .c {//.......
}.b .c {//........
}

app.js
<div><div className='a'><div className='c'></div></div><div className='b'><div className='c'></div></div>
</div>

3. VUE中的私有样式处理

<style scoped>
.example {color: red;
}
</style>
<template><div class="example">hi</div>
</template>

编译之后为:

<style>
.example[data-v-5558831a] {color: red;
}
</style>
<template><div class="example" data-v-5558831a>hi</div>
</template>

scoped属性做了如下操作:

给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（注意）

4 vue中样式穿透

有时需要在scoped标签里,修改第三方组件的样式,如下处理:

<style>
.example >>> element-ui {color: red;
}
//或则
.example::v-deep element-ui {color: red;
}
</style>

react样式的私有化方法相关推荐

vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
[react] 在react中遍历的方法有哪些？它们有什么区别呢？
[react] 在react中遍历的方法有哪些?它们有什么区别呢? 有React.Children.map和 React.Children.forEach这两个方法,他们的参数都是在组件中接受prop ...
通过反射创建私有化构造的类，并为私有化属性复制。调用私有化方法
import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...
python做一个窗口样式_python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法...
本文借用HTML的css语法,将样式表应用到窗口部件.这里只是个简单的例子,实际上样式表的语法很丰富. 以下类似于css: StyleSheet = """ QCombo ...
vue v-html 动态内容样式无效解决方法
vue v-html 动态内容样式无效解决方法参考文章: (1)vue v-html 动态内容样式无效解决方法 (2)https://www.cnblogs.com/mengfangui/p/122 ...
vue 列表萌层鼠标移入移出_vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法...
鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active 流量套餐 JS 这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的clas ...
JQUERY为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好为定义好的css样式可以调用元素的css方法添加样式$("span").css( ...
sketchup边线设置_SketchUp Pro for mac 背景天空边线样式的设置方法
原标题:SketchUp Pro for mac 背景天空边线样式的设置方法 Sketchup Pro 2019版是一套直接面向设计方案创作过程的设计工具,其创作过程不仅能够充分表达设计师的思想而且完 ...
思维导图simplemind添加样式预设的方法
在本篇文章中,我们介绍的是思维导图simplemind添加样式预设的方法.使用simplemind,可以隐藏或显示单个主题或分支显示分支边框以突出显示分支. 使用复选框,交联和自动编号搜索包含文本 ...

react样式的私有化方法

react样式的私有化方法相关推荐

最新文章

热门文章