Vue开发如何修改第三方组件的样式

举个例子，修改轮播图指示器

比如项目里运用了bootstrapVue，默认的轮播图指示器样式如下图：https://bootstrap-vue.org/docs/components/carousel

 当需求是使用原点指示器，如下图，我们可以这样子来修改

 1 <style lang="scss" scoped>
 2 ::v-deep .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8 ::v-deep .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }
11 </style>

 1 <style scoped>
 2 >>> .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8 >>> .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }
11 </style>

 1 <style lang="sass" scoped>
 2  /deep/  .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8  /deep/  .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }

 总结：

在捕捉到的第三方样式中，一般可以使用 >>> 来深度修改样式

至于项目已经使用了sass或者scaa编译器的情况下，则可以考虑用>>>的别名 /deep/ 或 ::v-deep操作符取而代之

标签：Vue,background,样式,deep,color,carousel,组件,rgba,255
来源： https://www.cnblogs.com/qpnets/p/14292147.html