我们在vue页面组件中写样式一般会加上scoped来防止全局污染
<style scoped> .red{color:red} </style>
但是对于组件内部的子组件中的样式我们在当前页面是看不到的,所以加上去也没有效果。当然你要是确定全局都需要修改,那直接把scoped去除即可,显然这种需求有,但不至于写篇文章记录。
那么我们要在当前页面修改子组件的样式就可以使用vue-loader穿透符号>>>
<style scoped> >>>.el-dialog__header{text-align: center;} </style>
注意很多时候我们不单用了scoped还使用了scss等预处理工具,即
<style scoped lang="scss"> >>>.el-dialog__header{text-align: center;} </style>
这时候发现样式又不起作用了,这是因为sass预处理器不认识这么个玩意,那么怎么解决呢
<style lang="scss" scoped> /deep/ .el-dialog__header{text-align: center;} </style>
当然这种方式有可能还是会报错,那么就把/deep/更换成::v-deep
<style scoped lang="scss"> ::v-deep .el-dialog__header{text-align: center;} </style>
评论前必须登录!
注册