Comment utiliser le style de portée vue js

Question

J'utilise js Vue d » ELEMENT UI . Et je veux remplacer son style. Je peux le faire avec un style global. Mais le style cadré ne fonctionne pas. Lorsque j'utilise le style global, cela change la conception de toutes les pages. mais je veux le faire juste pour une page.

Voici mon style (style global. Et cela fonctionne):

<style>
.el-icon-close:before{
    content: "Back" !important;
}
</style>

mais quand j'ai utilisé la portée, cela ne fonctionne pas:

<style scoped>
.el-icon-close:before{
    content: "Back" !important;
}
</style>

Y a-t-il une idée à ce sujet?

Answer 1

Le scopedmot-clé signifie que les modifications apportées au style ne s'appliqueront qu'aux éléments de la portée actuelle. Signification de tous les éléments personnalisés de la page. Si vous souhaitez accéder aux éléments "créés" ailleurs, vous devrez sauter le scopedmot - clé. Le code qui se trouve dans la balise de portée s'appliquera uniquement pour la page / vue actuelle, sinon il s'appliquera à toutes les pages / vues.

Tous les éléments non étendus sont généralement du style dans le App.vuefichier. Si vous souhaitez appliquer un style d'élément qui n'est pas limité, il vous suffit de l'envelopper dans un divajoutez la classe et de le styliser dans la balise de portée:

<style scoped>
.my-custom-div{
    .el-icon-close:before{
         content: "Back" !important;
    }
}
</style>

Au moins qui travaille avec moi.

Answer 2

Vous devez utiliser une classe personnalisée:

.custom-class {smthng va ici ...}