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

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

我正在开发 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>

解决方法

这可能是由于作用域样式造成的。试试这个：

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

,

您的问题是由于 style 范围。您可以创建一个 global.css 并将所有全局样式放入其中。我根据您的代码准备了一个有效的代码片段，以查看它是否有效。

new Vue({
  el: '#app'
})

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

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-checkbox name="check-button" switch size="lg" />
</div>