在vue-cli项目中,我们在二次覆盖样式的时候会遇到这个问题,就是在控制样式的时候,复制了类名,但是设置了样式会没有。
解决方式:在样式前面加一个 /deep/
<style lang="less" scoped>
.Home-container {
padding: 46px 0 50px 0;
.van-nav-bar {
background-color: #007bff;
color: white;
}
// 需要加 /deep/ 才能控制到它
/deep/ .van-nav-bar__title{
color: white;
}
}
</style>
具体可以总结如下图:
/deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。
如果想让某些样
式对子组件生效,可以使用 /deep/ 深度选择器。
注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。