Vue中的样式穿透

本文探讨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>

                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值