Bootstrap Vue 改变活动按钮的颜色

Question

我正在使用 bootstrap 和 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 功能的文档。

Bootstrap Vue 改变活动按钮的颜色

Bootstrap Vue change active button color

vue.js

bootstrap-vue