vue样式加scoped后不能覆盖组件的原有样式解决方法
<style scoped></style>为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加 /deep/ 。深度作用选择器 /deep/ or >
·
<style scoped>
</style>
为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加 /deep/ 。
深度作用选择器 /deep/ or >>>
如果希望scoped
样式中的选择器“深入”,即影响子组件
例子:
/deep/ .el-table .red-row {
background: #ffc2c2;
}
or
.el-table >>> .red-row {
background: #ffc2c2;
}
更多推荐
已为社区贡献10条内容
所有评论(0)