引导Vue更改活动按钮颜色

我在Vue上使用bootstrap。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>