如何局部覆盖element-ui的默认样式

最近项目中遇到的问题，只想在某个组件里面更改element-Ui的样式，而不影响全局。在网上看了很多瞎jb扯的东西，根本不适用或者没效果。

先手直接说方法：在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以咯，class自己去浏览器里右键审查元素可得到。

建议：在获取到的样式里加上能限制范围的父层选择器，不然就变成全局样式咯。

如果还有兴趣学习的可以看下原理讲解：

scoped作用：控制style内css的作用域就是当前这个组件，那么它的原理是什么呢？？

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

转译后：

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

 

打个广告：
关注公众号 “enjoy的生活“ 给你推荐优秀的小说动漫游戏，帮你查找各种资源，学习网络技术。