当我们在vue项目中使用第三方组件时,有时候需要去修改某些元素的样式,但有时写的css样式不会覆盖组件的样式,所以要用到样式穿透。
常用的方法有这几种:(1)>>> (2)/deep/ (3)::v-deep (4):deep()
但由于不同的样式解析器识别的语法不同,有时也不一定会生效。
用vant组件库的navbar组件举个例子。
地址:Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
vue2
使用vant组件库的版本:
修改导航栏标题的颜色,先找到标题对应的class:
html
<template>
<div class="world">
<van-nav-bar title="标题" left-text="返回" left-arrow/>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
/*.world >>> .van-nav-bar__title {*/
/* color: red;*/
/*}*/
/*::v-deep .van-nav-bar__title{*/
/* color: red;*/
/*}*/
/*/deep/ .van-nav-bar__title{*/
/* color: red;*/
/*}*/
:deep(.van-nav-bar__title){
color: red;
}
</style>
结果:
(1)当使用 css 时,这四种方法都可以生效。
(2)当使用 less 时,>>> 失效,其余三种方法都生效。
(3)当使用 sass 时,>>> 和 /deep/ 失效,其余两种方法生效。
vue3
使用vant组件库版本:
结果:
(1)当使用 css 时,>>> 失效,其余三种方法都生效。
(2)当使用 less 时,>>> 失效,其余三种方法都生效。
(3)当使用 sass 时,>>> 和 /deep/ 失效,其余两种方法生效。
虽然有些方法可以使用,但会在终端出现警告,比方说,当在使用 vue3 并且使用 less 的情况下,用 ::v-deep 和 /deep/ 生效,出现警告让使用 :deep() 。