Vuetify - CSS ne fonctionne pas (prise d'effet) à l'intérieur de la composante

Cas 1

Nous essayons d'appliquer la coutume d'un style à un rendu vuetify élément: 

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

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

Mais il n'y a pas de changements.

Cas 2

Nous essayons d'éléments de style rendus par v-html (par exemple, html externe). Par exemple, nous essayons d'appliquer la coutume de la largeur et de la hauteur de la img, mais ça ne fonctionne pas:

<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>

Comment appliquer le CSS personnalisé à ces éléments?

InformationsquelleAutor Traxo | 2018-06-22
  1. 42

    NOTE: assurez-vous d'inclure des styles comme par docs

    Aussi en cas de rupture de composants assurez-vous que votre application est enveloppé à l'intérieur v-app tag:

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

    La Documentation dit:

    Pour que votre application fonctionne correctement, vous devez l'envelopper dans un
    v-app composant.

    Solution

    utilisation vue-loader's profonde sélecteurs >>> comme suit:

    Cas 1:

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

    Cas 2:

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

    Donc il n'est pas nécessaire d'enlever scoped attribut de <style> tag.

    Extrait de docs en ce qui concerne le pré-traitement (par exemple, si vous utilisez <style lang="scss" scoped>):

    Certains pré-processeurs, tels que Sass, peuvent ne pas être en mesure d'analyser >>> correctement. Dans ces cas, vous pouvez utiliser le /deep/ combinator au lieu - c'est un alias pour >>> et fonctionne exactement de la même.

    Note: deep-sélecteurs ont été mis en œuvre dans v12.2.0

    Explication

    Dans les deux cas, CSS modifications ne sont pas prise d'effet parce que les éléments que vous essayez de style ne font pas partie de votre composant, et donc n'ont pas data-v-xxxxxxx attribut, qui est utilisé pour les éléments de style dans le champ d'application actuel (composant) lors de l'utilisation de <style scoped>.

    Lors de l'utilisation de scoped attribut de nous dire à la vue d'appliquer css pour les éléments avec data-v-xxxxxxx, mais pas imbriquée éléments. Donc, nous avons besoin d'utiliser de manière explicite profonde sélecteurs.

    Par exemple, dans le cas #1 rendu <v-text-field> ressemblera donc: 

    //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>

    Et en cas #2 rendu v-html ressemble à ceci:

    <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>

    Toujours pas de travail?

    Si vous essayez de remplacer un peu de style (inline-style) et cette solution ne fonctionne pas, vous pouvez en savoir plus sur les spécificités CSS.

    Bugs?

    Il est possible que même si vous ciblez correctement et d'utiliser la profonde sélecteurs de style n'est pas appliquée comme vous le souhaitez. Vérifiez si il y a correspondate de données-v-xxxxxx propriété sur l'un des éléments parents dans le rendu html, il pourrait y avoir des cas (bugs) lorsqu'elle n'est pas appliquée, alors il n'y a aucun moyen de cible via css délimités. Par exemple, on a v-menu rendus par v-sélectionnez, mais probablement possible de rencontrer d'autres bugs similaires dans l'avenir.

    • J'ai été la recherche de la profondeur des sélecteurs tout le long mais quand googler vous ne pouvez pas trouver quoi que ce soit... je vous Remercie beaucoup, vous venez de m'a sauvé beaucoup de temps et de stress 🙂
    InformationsquelleAutor Traxo