Vue3样式穿透

最新推荐文章于 2024-10-21 20:34:02 发布

Bunury

最新推荐文章于 2024-10-21 20:34:02 发布

阅读量156

点赞数 1

分类专栏： Css 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_49352307/article/details/142967020

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<style scoped lang="scss">
.table .el-form-item{
padding-top: 18px;
}
.table :deep(.el-table__cell) {
    padding: 0px !important;
}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bunury

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3样式穿透deep

qq_37635012的博客

06-28

750

在vue3.0之前可使用，例如(复写样式前加/deep/)，vue3.0及后使用就会报错。

23 vue3之详解scoped&样式穿透&vuecss新特性

qq_37550440的博客

09-27

230

PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。Vue 提供了样式穿透:deep() 他的作用就是用来改变。

参与评论您还未登录，请先登录后发表或查看评论

vue3项目样式穿透

just_xiaowei的博客

01-05

415

vue3的样式穿透写法

【Vue3】样式穿透

m0_62811051的博客

12-04

869

在引用UI组件输入框时，样式出现了如下问题，边距多了1px导致输入框与边框分离。根据我之前的经验，只要改变其外部样式就可以了。在此之前我都是选用less预处理器，然后使用 /deep/ 深度选择器修改第三库引入的组件。但是修改失败。经过查了大量博客，发现我当前选用的时scss预处理器，那么只能用 ::deep 总结三者的区别： >>> 深度作用选择器的简写形式Vue2.x的深度作用选择器正式写法Vue3.x的深度作用选择器正式写法Vue2.x版本使用优先级

vue3 样式穿透

weixin_45932463的博客

12-03

5172

vue2.x <<< .a /deep/ .a vue3 &:(.swiper-pagination-bullet-active){ width: 20px; height: 20px; background: #fff; }

【vue3】样式穿透、完整新特性、动态css、css-module

string佳佳的博客

10-28

2229

全局样式，跟不加scoped效果一样。vue2里面使用 /deep/vue3里面使用 :deep()

Vue中样式穿透共6种方法（Vue2、Vue3样式穿透，避免踩坑）

最新发布

LvManBa的博客

10-21

841

在vue页面的css中，有一个设置为scoped，使用以后dom的节点会出现下面的规则。其实我们打完包就是一个html页面，如果不做处理，将会导致css混乱。我们在vite框架中，引入element-plus组件，在App.vue中，输入下面代码：

详解源码vue3的样式穿透scope

apple_52957499的博客

01-21

3888

scope底层实现

Vue2 Vue3 Scoped 样式穿透

潮汐未见潮落的博客

05-11

3474

Vue2 Vue3 Scoped 样式穿透

vue3项目使用样式穿透修改elementUI默认样式

小绵杨

03-12

7980

在css单文件中，我们在style标签中写组件的样式，可以看到，一般style标签都会带上一个scoped属性，这样可以实现及时不同组件选择器一样，但是样式互不干扰。看一个例子，我们在两个组件中都定义一个类，在对应的scope标签中设置不同的样式。可以看到，vue为我们在不同的组件中的标签上加上了一个。然后通过属性选择器，实现不同属性的标签样式互不干扰。css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式这也是style标签scoped属性实现样式模块化的原理。

vue3实现样式穿透

fengshaopu的博客

12-02

2487

在vue2中可以直接使用 /deep/来穿透样式在vue3里面可以用过 :deep 来穿透样式

vue3 样式穿透(:deep())原理

一个希望世界和平的前端程序猿的博客

12-28

4031

scoped通过给元素和css样式添加不重复的data属性(data-v-xxx)来使模块私有化(整个过程通过PostCSS转译实现)。 PostCSS会给一个组件中的所有元素添加一个唯一的data属性(data-v-xxx)，给css选择器添加一个包含该属性的属性选择器，这样就让样式只作用于含有该属性的元素，从而实现样式隔离。

vue3中CSS穿透（override）

m0_48927448的博客

01-09

1347

在使用一些 CSS 预处理器（如 Sass 或 Less）时，你可能会遇到需要穿透（override）某些样式的情况。CSS 穿透是指在子组件中修改或覆盖父组件中的样式。或/deep/操作符来穿透样式。

Vue3.0遇见的样式穿透的坑

AzeShinja的博客

07-05

1026

前提：使用elementUI的input控件因为以前都是使用css，所以很自然的写了<<<，然后怎么穿透发现都没用，就感觉很离谱，后来使用了/deep/ 发现还是报错。经过了10多分钟的百度，发现scss下的<<< 不识别， vue3使用/deep/会报错，所以要使用**::deep** ::v-deep .el-input__inner { border-radius: 21px; padding-left: 40px

vue3第三十一节（vue3中定义局部样式，以及样式穿透）

weixin_39593730的博客

05-16

700

选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式。，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的。c、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。而样式的穿透多用于在项目自定义修改第三方 UI库的样式，用于满足本身项目的需要；会给一个组件中的所有dom添加了一个独一无二的动态属性。转译实现的），达到样式私有化模块化的目的。

vue2样式穿透失效

07-17

Vue 2中的样式穿透（Scoping Inheritance）是一种设计模式，用于解决组件内部CSS规则对父级元素影响的问题，通常在采用单文件组件(SFC)和Vue CLI构建的应用中。当一个组件需要修改其根元素的一些样式时，如果直接写在`.vue`文件的`<style>`标签内，样式会作用于整个应用，这可能会导致命名冲突。然而，在Vue 2的默认配置下，如果你使用了内置的 scoped 样式（即前缀为 `.` 的选择器），它会限制样式的应用范围到当前组件及其所有后代。这意味着，除非你在组件外部显式地引入未scoped的样式，或者使用`:v-deep` 或 `>>>` 伪元素穿透样式，否则父组件无法直接访问子组件的 scoped 样式。如果你发现样式穿透失效，可能是以下几种情况： 1. **未正确使用穿透符**：在父组件的样式中，你需要使用 `::v-deep` 或 `>>>` 来穿透子组件的 scoped 样式。例如：`.parent ::v-deep .child-class { ... }`。 2. **全局注册的样式库**：某些全局使用的CSS库如Element UI、Vuetify等，它们有自己的CSS模块系统，可能导致样式覆盖。在这种情况下，你需要确认是否正确处理了库内的穿透规则。 3. **CSS预处理器（如Sass、Less）**：在预处理器中，如果不小心，你可能需要手动转换或配置来支持穿透。 4. **CSS冲突**：两个组件同时设置了相同的样式，优先级较高的样式会生效。 5. **版本问题**：Vue 2.6及以上版本引入了更严格的CSS scoping，确保样式仅作用于组件自身。如果使用的是早期版本，可能需要升级或调整设置。