css - 如何在 bootstap-vue 切换按钮中更改背景颜色

Question

我正在为自己的技能开发工作 vue js 项目。

当我更改 bootstrap-vue 切换器背景颜色但不幸的是背景颜色没有改变？我是 Vue js 的新手。如果可以，请解决这个问题？

Vue结构：-

<div class="toggler-btn">
 <b-form-checkbox v-model="checked" name="check-button" switch>
 </b-form-checkbox>
</div>

风格：-

<style scoped>
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: red !important;
    background-color: red !important;
  }
</style>

标签： cssvue.jssassstylesheetbootstrap-vue

Answer 1

这可能是由于范围样式。试试这个：

 <style scoped>

      ::v-deep(.toggler-btn) {
          .custom-control-input:checked ~ .custom-control-label::before {
              color: #fff;
              border-color: red !important;
              background-color: red !important;
          }
      }

  </style>