解决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>
有什么不对的还请指正