背景
在开发vue项目中,引入第三方ui组件库,只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用
scoped
达到样式只制作用到本页面,但是此时再修改组件样式不起作用。
scoped的作用及实现原理
作用:当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
编译后:
<style>
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<div class="example" data-v-5558831a>hi</div>
</template>
所以:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性。然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom,组件内部的dom。
通过 ::v-deep
穿透 (推荐)
允许Sass 、Less之类的预处理器正确解析,并且兼容很多属性
<style lang="sass">
::v-deep 第三方组件类名 { 样式 !important; }
</style>
通过 /deep/
穿透
有些Sass 、Less之类的预处理器无法正确解析 >>>
。可以使用 /deep/
操作符( >>> 的别名)
<style lang="sass">
/deep/ 第三方组件类名 { 样式 }
</style>
在日常使用/deep/
的时候, /deep/
在vue 3.0会报错,还需要移除scoped。
通过 >>>
穿透scoped
iview中需要在组件上使用el-class声明第三方组件类名
<style scoped>
外层 >>> 第三方组件类名{ 样式 }
</style>