Как создать условный стиль для компонента Vue, если стили должны быть взяты из файла темы CSS? ⇐ CSS

[Anonymous]

Я пытаюсь заставить IconText стать белым и оставаться белым всякий раз, когда внешний элемент div (MyComponent) имеет черный цвет; в противном случае IconText должен оставаться таким, каким является var(--COLOR_WINDOWTEXT). Это должен быть COLOR_WINDOWTEXT, потому что мы можем изменить тему всей программы, и переменная var(--COLOR_WINDOWTEXT) будет иметь разные значения в зависимости от этой темы.
Как временно перезаписать стиль а затем вернуть его обратно к внешней CSS-переменной?




{{ displayText }}





import baseComponent from '../BaseComponent/BaseComponent.vue'
import { defineComponent, PropType } from 'vue'

const MyStatusComponent = defineComponent({
name: 'MyStatusComponent',
extends: baseComponent,
props: {
//WIKI: The fully defined path name of the status variable, an empty string means no variable.
VARIABLE: { type: String, default: '' },
},
data() {
return {
varValue: undefined as string | undefined,
clrValue: undefined as string | undefined,
txtValue: undefined as string | undefined,
}
},
methods: {
tick() {
if (this.VARIABLE) {
const val = this.getVariable()
if (val) {
this.varValue = val.sValue() ?? ''
} else {
this.varValue = undefined
}
}
},
},
computed: {
displayText(): {
return 'text'
}
StatusClass(): string {
if (this.varValue !== undefined && this.varValue != "?") {
const data = JSON.parse(this.varValue);
this.clrValue = data.clr;
this.txtValue = data.txt;
switch (this.clrValue) {
case 'blue': return 'statusBlue'
case 'red': return 'statusRed'
case 'black': return 'statusBlack'
}
}
return 'statusGrey'
},
},
})
export default MyStatusComponent



.MyComponent {
color: v-bind(StatusClass);
}

.IconText {
color: var(--COLOR_WINDOWTEXT); /* ?? I need help understanding what needs to be overriding what here. */
font-size: var(--FONT_SIZE_LRG_TEXT);
}

.statusBlue {
background-color: var(--COLOR_STATUS_BLUE);
}
.statusRed {
background-color: var(--COLOR_STATUS_RED);
}

.statusBlack {
background-color: var(--COLOR_BLACK_TRUE);
}



Подробнее здесь: https://stackoverflow.com/questions/792 ... -need-to-c