美文网首页
样式穿透 解决ui框架组件修改样式

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

作者: 闲人追风落水 | 来源:发表于2020-12-11 15:03 被阅读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标准模式

相关文章

网友评论

      本文标题:样式穿透 解决ui框架组件修改样式

      本文链接:https://www.haomeiwen.com/subject/jcmjgktx.html