vue样式加scoped后不能覆盖组件的原有样式解决方法

165 阅读 0 评论 109 点赞

我是靠谱客的博主风中毛衣，这篇文章主要介绍vue样式加scoped后不能覆盖组件的原有样式解决方法，现在分享给大家，希望可以做个参考。

<style scoped>

</style>

为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。可以加 /deep/ 。

深度作用选择器 /deep/ or >>>

如果希望scoped样式中的选择器“深入”，即影响子组件

例子:

/deep/ .el-table .red-row {

background: #ffc2c2;

}

.el-table >>> .red-row {

background: #ffc2c2;

}

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。