Bootstrap Vue更改活动按钮颜色

Question

我在Vue.js中使用bootstrap。

我有一个表单复选框组，如下所示

      <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特性的文档。