vue 样式穿透尖括号3、/deep/ 、::v-deep 应用场景注意事项

本是古典何须时尚 2023-02-20 04:47 12阅读 0赞

[官方文档地址,更多关于Scoped CSS的内容][Scoped CSS]

在很多vue的组件库 , 如`vant，elementUI， iview`等都可能自定义一些样式文件

项目中用到了 `elementui`，如果使用预处理器 `scss, sass,less` , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉`scoped`话又会影响全局样式。当然我们知道可以使用 样式穿透的方式操作

那么究竟什么时候使用 `>>>` 什么时候使用 `/deep/` 和 `::v-deep` 实际操作中会有什么问题呢?

##### 1、>>> #####

如果项目使用的是`css 原生样式`,那么你可以直接使用 `>>>` 穿透修改

<style scoped>
    /*编译前*/
    .a >>> .b {  
     /* ... */
    }
    
    /*编译后*/
    .a[data-v-f3f3eg9] .b {  /* ... */ }
    </style>

##### 2、/deep/ #####

项目中用到了预处理器 scss 、sass、less 操作符 `>>>` 可能会因为无法编译而报错 。可以使用 `/deep/`  
**注意：vue-cli3以上版本不可以**

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

##### 3、::v-deep #####

如果使用了预处理器都可以使用 `::v-deep`

<style lang="scss" scoped>
    /*用法1*/
    .a{ 
     ::v-deep .b {  
      /* ... */
     }
    } 
    /*用法2*/
    .a ::v-deep .b { 
      /* ... */
    }
    </style>

[Scoped CSS]: https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关（css样式穿透详解）::v-deep的使用

目录背景使用： 1、当项目中使用的 css 原生样式，需要使用 >>> 深度选择器来修改外用第三方组件的样式 2、当项目中使用的 css 扩展语言是 less

红太狼/ 2023年10月14日 23:44/ 0 赞/ 62 阅读

相关 Vue3中scoped样式穿透原理以及如果使用样式穿透

主要是用于修改很多vue常用的组件库（element, vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式，就需要用到样式穿透。 scoped的原

刺骨的言语ヽ痛彻心扉/ 2023年10月10日 21:23/ 0 赞/ 35 阅读

相关 vue项目注意事项

vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块，每个文件名需要大写，路由命名全部小写，第一层路由就是最下面的那几个导航的名

港控/mmm°/ 2023年06月01日 12:53/ 0 赞/ 31 阅读

相关 vue 样式穿透尖括号3、/deep/ 、::v-deep 应用场景注意事项

[官方文档地址,更多关于Scoped CSS的内容][Scoped CSS] 在很多vue的组件库 , 如`vant，elementUI， iview`等都可能自定义一些样式

本是古典何须时尚/ 2023年02月20日 04:47/ 0 赞/ 13 阅读

相关 Vue样式穿透

在vue组件中，样式一般都会加上scoped属性来防止组件之间的样式冲突，但是这样也会造成一个问题，如果想组件中修改UI（比如element-ui）库中的某一个样式，会失效。

曾经终败给现在/ 2022年12月21日 13:59/ 0 赞/ 190 阅读

相关 vue样式穿透::v-deep和/deep/的具体使用-案例

> 在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" sco

「爱情、让人受尽委屈。」/ 2022年10月07日 13:47/ 0 赞/ 438 阅读

相关【Vue】样式穿透 ::v-deep的具体使用

【Vue】样式穿透 ::v-deep的具体使用之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用

桃扇骨/ 2022年09月14日 14:19/ 0 赞/ 278 阅读

相关 Vue--样式穿透

原文网址：[Vue--样式穿透\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 [vue样式穿透 ::v-deep的具体使用 - 只争朝

秒速五厘米/ 2022年09月03日 05:20/ 0 赞/ 213 阅读

相关 Vue--注意事项

原文网址：[Vue--注意事项\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 滚动其他网址 > [vue 中监听document.body.

缺乏、安全感/ 2022年08月31日 09:56/ 0 赞/ 167 阅读

相关 iview - css >>> 、 /deep/ 进行样式穿透

前言在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用`scoped`达到样式只制

本是古典何须时尚/ 2021年09月29日 06:02/ 0 赞/ 461 阅读