CSS样式穿透

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

相关推荐
豆苗学前端2 分钟前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家18 分钟前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞19 分钟前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手20 分钟前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞28 分钟前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor1 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i1 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor1 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
东哥很忙XH1 小时前
flutter开发的音乐搜索app
android·javascript·flutter
前端Hardy2 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css