CSS样式穿透 - 技术栈

CSS样式穿透

掉头发类型的选手2023-11-18 14:10

当我们在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() 。