Bootstrap Vue 更改活动按钮颜色

Question

我正在使用带有 Vue.js 的引导程序。

我有一个这样的表单复选框组

      <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>

我希望将所选按钮设置为特定颜色（而不是稍微暗​​一点）。

我尝试添加下面的代码，但不幸的是它不起作用

.active {
  background: rgb(243, 16, 0) !important;
}

完整代码在这里：

<template>
  <div class="Overview">
          <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "Control",
  data() {
    return {
      selected: "F1_Water",
      options: [
        { value: "F1_Water", text: "Water" },
        { value: "F1_Clean", text: "Cleaning solution" },
        { value: "F1_None", text: "None" }
      ]
    };
  }
};
</script>

<style>
.active {
  background: rgb(243, 16, 0) !important;
}
</style>

Answer 1

您在</script> 结束标签之后错过了<style> 开始标签。

请记住，您不应该在其中包含 scoped，因为 css 样式的目标是不同的组件（b-form-checkbox-group 组件），所以它只是

<style>
  .active {
    background: rgb(243, 16, 0) !important;
  }
</style>

这里是 Vue.js 中 scoped CSS 功能的文档。