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

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

直接在中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。

百度之后发现可以用 /deep/或::v-deep来解决（不过在vue3.0的环境下，使用/deep/时，编译会报错）。

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped> .a >>> .b { /* ... */ } </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

解决/deep/在vue 3.0会报错中的问题

可以用::v-deep来解决

使用方法如下：在想要修改的样式前面加上v-deep就可了

::v-deep .v-text-field.v-text-field--enclosed .v-text-field__details {margin-bottom: 8px;padding: 0px !important;
}

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

vue组件样式穿透种类 /deep/ ::v-deep ＞＞＞。the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() in
vue组件样式穿透种类 /deep/ ::v-deep >>> vue项目打包时警告:the >>> and /deep/ combinators have bee ...
Vue 中 css scoped 样式穿透 ( stylus[] / sass / less[/deep/] )
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...
【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透
scoped 在了解scoped属性之前,先了解一下Vue(中的插件)在渲染DOM时干了什么.Vue在渲染DOM后会在DOM节点上生成一个随机串data属性,这一属性给了当前组件下的DOM一种唯一标识 ...
vue脚手架图片懒加载模块和样式穿透
1.vue样式穿透 vue样式穿透:在样式隔离的前提下,在父组件中修改子组件样式正常情况下,在样式隔离的前提下,父标签不能修改子组件样式.如果想修改子组件样式,使用样式穿透 1.1 样式穿透语法结构 ...
vue css样式穿透
1. 关于常规css样式的穿透语法 >>> <style scoped>>>> .boxFather .boxChild{width: 200px !i ...
带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言在我们前端的开发中经常会使用到各种 ui 框架下面这两个是比较火的,也是我常用的两个ui框架. 问题描述但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
vue中样式穿透的三种写法
在vue项目中,当我们使用第三方组件库时,例如(element-ui.vant)时,遇到需要修改组件中第三方组件库中的样式,但同时又不想去除scoped属性造成组件之间的样式覆盖,这时,我们就可以使用 ...
vue的scoped 样式隔离，样式穿透，及细节
先说环境吧:vue 3.2.45,也试过vue 3.2.16 vue的scoped样式隔离原理: 在当前组件的.vue文件中,如果style标签加了scoped属性,那么在组件渲染为DOM时,会对每 ...
Vue中关于scoped以及scoped样式穿透的原理与使用详解
1. scoped 当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped 示例组件de ...

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

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

深度作用选择器

解决/deep/在vue 3.0会报错中的问题

可以用::v-deep来解决

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

最新文章

热门文章