Как применить условный стиль к снятому флажку

Question

Мы запускаем Vue 2.x с vuetify и пытаемся выяснить, как установить некоторый условный пользовательский стиль для снятых флажков в таблице для просмотра / создания / обновления разрешений пользователей. Роли определяются примерно так:

Добавляются представления роли A и редактирования роли B. Серые поля - это разрешения, которые не изменились. Это работает по желанию.

Проблема в том, что я не могу понять, как назначить цвет / стиль / класс неотмеченным полям, чтобы мы могли отмечать отозванные разрешения пустым красным флажком, чтобы, если бы управление было снято, последняя строка выглядит так:

Мы используем, но также пытались переопределить css. Мы пробовали использовать css классы,: color,: fill,: style, но ничего не работает, чтобы сделать контур прямоугольника красным.

Это то, что у нас есть в настоящее время и работает для отмеченных полей:

            <template v-slot:item.view.id="{ item }">
              <v-simple-checkbox
                v-if="item.view.id"
                v-model="item.view.active"
                :disabled="!edit"
                :color="getCheckboxColorForRole(item.view)"
                @click="updateRolesRow(item, 'view')"
              >
              </v-simple-checkbox>
            </template>

где getCheckboxColorForRole сравнивает начальное и текущее состояние и возвращает соответствующий цвет для отображения.

Что мне здесь не хватает?

Answer 1

за @Anatoly Я снова заглянул в область видимости css и смог заставить ее работать. Но затем сделал его глобальным правилом css, чтобы я мог использовать s css var для цвета и применять его на других страницах. Вот что у меня получилось:

            <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-checkbox>, поскольку простой флажок не позволял мне добавлять классы. Затем я проверил / снял флажок несколько раз и заметил, что единственное изменение состоит в том, что класс gray--text удаляется, когда он не установлен. Итак, я добавил это правило css:

.group-role-checkbox-original-checked i:not(.gray--text) {
  color: $anchor-color !important;
}

Если кто-нибудь знает лучший способ сделать это, я хотел бы знать.

Answer 2

не могли бы вы предоставить код? в основном это привязка стиля