【项目小tips】scoped属性的使用

项目场景：

在做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>

---

原因分析：

1. scoped属性的作用就是：加上scoped会使得样式只对当前的组件有用。
   对于某一个组件，如果style上添加了scoped属性，就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。如：
   
2. 如果子组件的根节点和父组件中书写的样式相同，那么也会被添加上相应的样式，但如果子组件中层次比较复杂，那就影响不到了。
3. Element-ui作为网页的子组件，且轮播图的结构比较复杂，尤其到按钮的时候，已经不知道套了多少层了，因此此时，需要使用深度选择器。
4. 深度选择器可以实现样式穿透
   原生CSS： >>>
   less： /deep/
   scss： ::v-deep

---

解决方案：

<style scoped>
/*生效*/
>>>.el-carousel__button {
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 20px;
}
</style>