【项目小tips】scoped属性的使用
项目场景:在做Vue项目的过程中,想要更改Element-ui中轮播图按钮的样式,发现按钮样式只能放在style中,如果放在style scoped中就不会生效。问题描述<style>/*生效*/.el-carousel__button {width: 40px;height: 40px;background-color: pink;border-radius: 20px;}</
·
项目场景:
在做Vue项目的过程中,想要更改Element-ui中轮播图按钮的样式,发现按钮样式只能放在style中,如果放在style scoped中就不会生效。
问题描述
<style>
/*生效*/
.el-carousel__button {
width: 40px;
height: 40px;
background-color: pink;
border-radius: 20px;
}
</style>
<style scoped>
/*不生效*/
.el-carousel__button {
width: 40px;
height: 40px;
background-color: pink;
border-radius: 20px;
}
</style>
原因分析:
- scoped属性的作用就是:加上scoped会使得样式只对当前的组件有用。
对于某一个组件,如果style上添加了scoped属性,就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。如:
- 如果子组件的根节点和父组件中书写的样式相同,那么也会被添加上相应的样式,但如果子组件中层次比较复杂,那就影响不到了。
- Element-ui作为网页的子组件,且轮播图的结构比较复杂,尤其到按钮的时候,已经不知道套了多少层了,因此此时,需要使用深度选择器。
- 深度选择器可以实现样式穿透
原生CSS: >>>
less: /deep/
scss: ::v-deep
解决方案:
<style scoped>
/*生效*/
>>>.el-carousel__button {
width: 40px;
height: 40px;
background-color: pink;
border-radius: 20px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)