Tengo este BaseComponent usado y configurado en otro componente de la siguiente manera:
<BaseTitle v-slot="{ highlightClass }" :color="mode === 'faq' ? 'dark' : 'secondary'" v-bind="__titleProps" :text-uppercase="mode === 'incentive'" highlight-type="colorize-uppercase-bold" :class="{ 'font-weight-normal': mode === 'faq' }" >En este elemento tengo una clase css-hover
.InfoTile { &:hover { .answer { background-color: $transparent-primary; opacity: 1; } .question { opacity: 0; } }Cuando uso el modo "incentivo", necesito usar otro color de fondo de desplazamiento. ¿Hay alguna forma de usar otro desplazamiento dependiendo del modo que use?
Entonces, es totalmente posible.
Solo necesita crear 2 clases CSS diferentes, entre el modo normal y el incentivo, que tendrán 2 hover diferentes, etc.
harás un término condicional comprobando si modo === incentivo.
Pero, lo primero que debe hacer es configurar más de una clase en su componente, ya está usando una.
Entonces, solo haz algo como esto.
:class="[{ 'font-weight-normal': mode === 'faq' }, mode === incentive ? 'cssClass1': 'cssClass2']"