Vue中的样式穿透

最新推荐文章于 2024-08-12 17:05:45 发布

你要多奇怪

最新推荐文章于 2024-08-12 17:05:45 发布

阅读量945

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xf_wwx/article/details/108548842

版权

本文探讨Vue中样式穿透的解决办法，特别是在遇到组件样式不生效时的应用。讲解了`scoped`属性的工作原理，即通过PostCSS转换，将样式限制在组件内部。同时，介绍了如何利用`>>>`或`::v-deep`操作符进行样式穿透，以便影响子组件或覆盖第三方组件库的样式。

摘要由CSDN通过智能技术生成

关于Vue中的样式穿透

前段时间，写一个轮播图组件的时候遇到了一个样式不生效的问题，通过样式穿透解决了，记录一下。
对于vue文件中的 <style> 标签，加上 scoped 属性，它的css样式只能用于当前的组件，它的原理的是通过使用 PostCSS 来实现转换

scoped 转换规则

组件的根元素、组件自身的后代元素、子组件的根元素都会加上该组件特定的 data-v-x 属性。
css样式中，最后一个选择器会被添加上 data-v-xxx 属性选择器

/* Father.vue */
<template>
	<div class="father-wrapper">
        <div class="inner">
            father-inner
        </div>
        <child-cmp></child-cmp>
    </div>
</template>
<style scoped>
    .father-wrapper {
        border: 1px solid;
    }
    .father-wrapper .inner {
        font-size: 20px;
    }
    .father-wrapper .child-wrapper .inner-1 {
        font-size: 20px;
    }
</style>