样式穿透 解决ui框架组件修改样式

2020-12-11  本文已影响0人  闲人追风落水

vue中使用这中样式写法的时候
<style lang="scss" scoped> .... </style>

当使用ui框架的时候,框架的组件在使用中,属于你当前所写页面的子组件

<style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式

1.如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符

<style lang="css" scoped>
.a >>> .b { 
 /* ... */
}
</style>

2./deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>

3.::v-deep


::v-deep .a{
 ***
}

建议使用 ::v-deep标准模式

上一篇下一篇

猜你喜欢

热点阅读