VUE style scoped 内修改组件样式

style scoped 内修改外部组件样式不生效的解决方法

想修改项目中 ant Design 组件的样式,发现在< style scoped> 内直接修改并没有效果。

解决方法

当vue的< style>标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。如果需要修改子组件的样式可以用到深度作用选择器
如果希望 scoped 样式中的一个选择器能够作用得“更深”,影响到子组件,你可以使用 >>> 操作符:

// 在css 中使用
<style scoped>
.a >>> .b {  
     width:100px;
    text-align: center; 
    }
</style>

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

// 在sass 中使用
<style lang="scss" scoped>
.a {
  /deep/  .b {
    width:100px;
    text-align: center;
  }
}
</style>

参考官方文档:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器

原因

scope设计的初衷就是让样式变得不可修改。当设置了scoped的style标签无法覆盖最外面antd的样式
scoped原理就是在css以及html上加一个唯一标识,然后根据权重来实现目的
如下

//
<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果为

//
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

其他方法

可以在一个组件中同时使用有 scoped 和非 scoped 样式:

// 混合样式
<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值