Vuejs2 如何将条件样式应用于未选中复选框

我们正在使用vuetify运行Vue 2.x，并试图找出如何为表上未选中的复选框设置一些有条件的自定义样式，以便查看/创建/更新用户权限。角色定义如下：

正在添加角色A视图和角色B编辑。灰色框是未更改的权限。这正按预期工作

问题是，我不知道如何将颜色/样式/类别分配给未选中的框，以便我们可以使用空的红色复选框标记已撤销的权限，这样，如果未选中“管理”，最后一行将显示为：

我们正在使用，但也尝试了css覆盖。我们已经尝试使用css类，：color，：fill，：style，但是没有任何东西可以使框的轮廓变红

这是我们目前拥有的，并且正在为复选框工作：

您能提供一些代码吗？基本上这是样式绑定

您能提供一些代码吗？基本上，这是风格绑定，我再次查看了范围内的css，并能够使其正常工作。但后来它成为了一个全局css规则，这样我就可以将scss变量用于颜色，并将其应用于其他页面。这就是我的结局：

            <template v-slot:item.view.id="{ item }">
              <v-checkbox
                v-if="item.view.id"
                v-model="item.view.active"
                :disabled="!edit"
                :color="getCheckboxColorForRole(item.view)"
                :class="[{'group-role-checkbox-original-checked': item.view.originalActive}]"
                :ripple="false"
                @click="updateRolesRow(item, 'view')"
              >
              </v-checkbox>

---

如果有人知道更好的方法，我很想知道。

per@Anatoly我再次查看了范围css，并能够使其工作。但后来它成为了一个全局css规则，这样我就可以将scss变量用于颜色，并将其应用于其他页面。这就是我的结局：

            <template v-slot:item.view.id="{ item }">
              <v-checkbox
                v-if="item.view.id"
                v-model="item.view.active"
                :disabled="!edit"
                :color="getCheckboxColorForRole(item.view)"
                :class="[{'group-role-checkbox-original-checked': item.view.originalActive}]"
                :ripple="false"
                @click="updateRolesRow(item, 'view')"
              >
              </v-checkbox>

---

如果有人知道更好的方法，我很想知道。

要在v-table外部编写CSS规则，并在具有范围样式的插槽中使用内部组件（如v-siple-checkbox），您需要使用

>

深度选择器，请参阅在v-table外部编写CSS规则，并在具有范围样式的插槽中使用内部组件（如v-siple-checkbox），您需要使用

>

深度选择器，请参阅