目录
1、为什么需要使用 scoped
2、scoped 穿透问题
当一个style
标签拥有scoped
属性时,它的CSS
样式就只能作用于当前的组件。通过该属性,可以使得组件之间的样式不互相污染,相当于实现了样式的模块化。
scoped
模块化是通过PostCSS
插件实现的,实现原理是怎样的?
如下所示,是编译前的源码:
<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>
在CSS语法中,div[data-v-5558831a]
表示匹配所有带有data-v-5558831a
属性的div
标签。如下所示代码:
a[href] {color:red;}
只对有href
属性的a
标签应用样式。
在编译阶段,PostCSS
插件通过给html
标签添加data-v-5558831a
属性,并且同时给样式类.example
添加同名修饰符,自动实现了css
模块化。
这便是 scoped
模块化的实现原理。
当在项目中引用了第三方组件,而第三方组件使用了scoped
模块化。此时需要在己方组件中局部修改第三方组件的样式,便涉及到了穿透问题。
由于第三方组件被自动添加了随机的类data-v-5558831a
属性,此时消费方在外围即使使用!important
也是无济于事的。
假设项目中使用element-ui
的table
组件,此时想在己方组件中修改table
组件标题高度。通过检视组件代码发现,其标题类名为.el-table__header-wrapper
。使用穿透法解决问题应如下编码:
<style lang="less" scoped>
.el-contain-row /deep/ .el-table__header-wrapper {
height: 20px;
}
</style>
在sass
和less
样式中穿透 使用/deep/
。
又例,在vue
项目中使用了vuetify
框架,如下所示,如果想改变这个按钮的文本颜色:
<v-btn small color="primary" id="button2">测试scoped穿透</v-btn>
外围的穿透样式可以写:
#button2.v-btn /deep/ .v-btn__content{
color: @theme-color;
}
https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200104
参考链接
基于 vue+go 如何快速进行业务迭代?