无法在 Vuetify v-btn-toggle 中为选定按钮设置活动类答案

【问题标题】：Not able to set active-class for selected button in Vuetify v-btn-toggle无法在 Vuetify v-btn-toggle 中为选定按钮设置活动类
【发布时间】：2020-05-18 10:24:17
【问题描述】：

我正在使用 Vuetify v-button-toggle 在三个按钮之间切换，如下所示。每个按钮都有不同的活动类。但是单击按钮不会设置活动的相应活动类。我错过了什么？

<v-btn-toggle
  v-model="justify"
  borderless
  dense
  group
  class="d-flex flex-column "
>
  <v-btn active-class="dnrSelected" exact>
    <v-icon right class="mr-2">mdi-close</v-icon>
    <span>Do Not Recommend</span>
  </v-btn>
  <v-btn active-class="rSelected">
    <v-icon right class="mr-1">mdi-check</v-icon>
    <span>Recommend</span>
  </v-btn>
  <v-btn active-class="srSelected">
    <v-icon right class="mr-1">mdi-check-all</v-icon>
    <span>Strongly Recommend</span>
  </v-btn>
</v-btn-toggle>

CSS 类

<style scoped>
  .dnrSelected {
    background-color: #e57373;
  }
  .rSelected {
    background-color: #c5e1a5;
  }
  .srSelected {
    background-color: #81c784;
  }
</style>

更新：按预期将类添加到单击按钮

<button type="button" class="v-btn srSelected v-btn--active v-btn--contained theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mr-1 v-icon--right mdi mdi-check-all theme--light"></i> <span>Strongly Recommend</span></span></button>

更新：下面的默认 Vuetify 类覆盖了自定义样式

.v-btn-toggle--group > .v-btn.v-btn {
  background-color: transparent !important;
  border-color: transparent;
  margin: 4px;
  min-width: auto;
}

如何覆盖这个默认样式类？

【问题讨论】：

标签： css vue.js vuetify.js v-btn

【解决方案1】：

我刚刚在 codepen 上试过，它工作正常。 https://codepen.io/v08i/pen/rNaXyxe

这里是部分代码。 codepen 上的完整代码。

<div id="app">
  <v-app id="inspire">
    <v-card
      flat
      class="py-12"
    >
      <v-card-text>
        <v-row
          align="center"
          justify="center"
        >
          <v-col cols="12">
            <p class="text-center">Multiple</p>
          </v-col>
          <v-btn-toggle
            v-model="toggle_exclusive"

          >
            <v-btn active-class="aa">
              <v-icon>mdi-format-align-left</v-icon>
            </v-btn>
            <v-btn active-class="bb">
              <v-icon>mdi-format-align-center</v-icon>
            </v-btn>
            <v-btn active-class="cc">
              <v-icon>mdi-format-align-right</v-icon>
            </v-btn>
            <v-btn active-class="dd">
              <v-icon>mdi-format-align-justify</v-icon>
            </v-btn>
          </v-btn-toggle>

          <v-col
            cols="12"
            class="text-center"
          >
            Model: {{ toggle_exclusive }}
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-app>
</div>

一个建议。我认为作用域 CSS 可能会搞砸，因为这些是 vuetify 自己的组件。你能从样式中删除scoped 并检查吗？

【讨论】：

删除范围没有帮助。这很简单，但不起作用。
您使用的是哪个版本的 vuetify？
它是 nuxtjs vuetify 1.9.0
你能检查一下你的 CSS 是否被覆盖了吗？
类可能会被添加，但该类的 CSS 规则仍有可能被 vuetify 自己的或其他一些 CSS 覆盖。

【解决方案2】：

我发现的一种解决方法是通过为包含元素提供如下 ID 来专门针对自定义 CSS 中的元素

<v-btn-toggle
 id="btnGroup"
 borderless
 dense
 group
 class="d-flex flex-column"
>

然后使用id 指定目标元素，如下所示

#btnGroup .dnrSelected {
  background-color: #ef9a9a !important;
}

【讨论】：