vuetify.js - Vuetify-CSS no funciona(tiene efecto) dentro del componente

Question

Caso 1
Estamos tratando de aplicar un estilo personalizado a un elemento vuetify renderizado:

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

Pero no hay cambios.

Caso 2
Estamos intentando dar estilo a los elementos representados por v-html (p. Ej., Html externo). Por ejemplo, tratamos de aplicar ancho y altura personalizados en el img , pero no funciona:

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

¿Cómo aplicar CSS personalizado a esos elementos?

Answer 1

NOTA : Asegúrese de incluir estilos según los docs
También en el caso de componentes rotos, asegúrese de que su aplicación esté dentro v-app etiqueta v-app :

<v-app> 
    <v-content>
    //..
    </v-content>
</v-app>

La documentación dice :

Para que su aplicación funcione correctamente, debe envolverla en un componente v-app .

Solución

use los selectores profundos de vue-loader >>> así:

Caso 1:

>>>.input-group__input {
    background: red;
}

Caso 2:

>>>img {
    width: 200px;
    height: 200px;
}

Por lo tanto, no es necesario eliminar el atributo de scoped de la etiqueta <style> .

Extracto de documentos con respecto a los preprocesadores (por ejemplo, si está utilizando <style lang="scss" scoped> ):

Es posible que algunos preprocesadores, como Sass, no puedan analizar >>> correctamente. En esos casos, puede usar el /deep/ combinator en su lugar, es un alias para >>> y funciona exactamente igual.

Nota : los selectores de profundidad se implementaron en v12.2.0

Explicación

En ambos casos, los cambios de CSS no tienen efecto porque los elementos que está tratando de diseñar no forman parte de su componente y, por lo tanto, no tienen el atributo data-v-xxxxxxx , que se usa para los elementos de estilo en el ámbito (componente) actual cuando utilizando <style scoped> .
Cuando se utiliza el atributo de scoped le decimos a vue que aplique css solo a elementos con data-v-xxxxxxx , pero no elementos anidados . Por lo tanto, necesitamos utilizar explícitamente los selectores profundos.

Por ejemplo, en el caso #1 <v-text-field> se verá así:

// notice `data-v-61b4012e` here:
<div data-v-61b4012e class="input-group input-group--text-field primary--text">
    <label>Name</label>
    <div class="input-group__input"> // and notice no `data-v-61b4012e` here
        <input tabindex="0" aria-label="Name" type="text">
    </div>
    <div class="input-group__details"></div>
</div>

Y en el caso #2 renderizado v-html ve así:

<div data-v-61b4012e> // notice `data-v-61b4012e` here  
    // and no `data-v-61b4012e` on image
    <img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">
</div>

¿Sigue sin funcionar?

Si está intentando anular algún estilo (estilo en línea) y esta solución no funcionó, es posible que desee ver más sobre la especificidad de CSS .

¿Loco?
Es posible que incluso si se dirige correctamente y usa selectores profundos, ese estilo no se aplica como cabría esperar. Compruebe si hay una correlación de la propiedad data-v-xxxxxx en uno de los elementos principales en html renderizado, puede haber casos (errores) cuando no se aplica, por lo tanto, no hay manera de dirigirse a ella a través de css con ámbito. Un ejemplo fue v-menu renderizado por v-select , pero probablemente sea posible encontrar otros errores similares en el futuro.