修改element ui组件样式

解决element ui样式修改不生效的问题(样式穿透)

1.如果使用css 原生样式,那么可以直接使用 >>> 穿透修改

<style>
	.a >>> .b { 
	 color:red;
	}
 //编译后
 .a[data-v-f3f3eg9] .b { color:blue; }
</style>

2.项目中用到了预处理器 scss 、sass、less 都可以使用 /deep/
注意：vue-cli3以上版本不可以

<style lang="scss" scoped>
.a /deep/ .b{
color:red;
}
</style>

项目中的预处理器是scss 但是使用 /deep/ 穿透样式修改 报错如下

后来使用这个解决了办法

3.::v-deep在预处理器 scss 、sass、less 比较通用

<style lang="scss" scoped>
.a ::v-deep .b {
 color:blue
}
</style>

4.如果多个文件用到了同一个element组件，但是要求组件样式不一样，解决办法：在选择器的前面添加一个ID选择器来限制作用范围

new.vue文件中

<style lang="scss" scoped>
// 分页
#new .el-pagination {
  padding: 0.375rem 0.625rem;
  text-align: right;
}
// 标题
#new .el-dialog__header {
  text-align: left;
  background: #e2eaf3;
</style>

course.vue文件中

<style lang="scss" scoped>
// 分页
#course .el-pagination {
  padding: 0.375rem 0.625rem;
  text-align: right;
}
// 标题
#course .el-dialog__header {
  text-align: left;
  background: #e2eaf3;
</style>

有什么不对的还请指正

推荐查看博客