关于使用别人的组件库无法修改组件库里面的样式的问题

最近，在使用vue开发一个移动端h5的时候，使用了一个github上的

<style scoped>
calender{
background-color:#eee;
}
</style>	

但是，无论怎么设置，日历的背景颜色就是不会改变，自己试了一下，要将样式生效，必须将scoped去除，但是这样就污染了全局样式。后来查询了一下，得到以下的知识点

• 使用scoped之后，父组件的样式将不会渗透到子组件中，不过子组件的根节点同时会受父组件的scoped CSS 和 scoped CSS 的影响。

• 在无法影响子组件的情况下，可以使用深度选择器来让scoped样式中的一个选择器作用的更深，可以使用 >>> 操作符

  <style scoped>
      .a >>> .b {
          /*  需要设置给子组件b的样式  */
          color: red;
      }
  </style>
  

• 有些像sass之类的预处理器无法正确解析>>>,那么可以使用/deep/或者::v-deep取代>>>

  <style lang="scss" scoped>
  .calendar /deep/ div {
        border: 1px solid red;
      }
  </style>
  

感悟

目标正确，行动才能有效。