一、如何修改element-ui默认的css样式
- 去除scoped
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped
解决方法:
在原来的css样式下面,新编写一个不带scoped属性style,里面写需要修改的element-ui默认css样式。
——————可以解决问题——————
缺点:这样设置的是全局样式,意思就是如果你的项目里面有多个css需要修改,那么这么设置,两个地方都会被改变。
- 样式穿透 >>>
父类(或者更高级) >>> 需要修改的类
.wrapper >>> .swiper-pagination-bullet-active{
background: #fff
}
- lang=" less/sass" 使用 : /deep/
父类(或者更高级)/deep/ 需要修改的类
——————可以解决问题——————
缺点:无
// 语法
外层 /deep/ 第三方组件 {
样式
}
// eg
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}