Comment modifier le style du sous-composant via le composant parent dans vue

Maintenant, je vais partager avec vous un article sur la façon de modifier le style des composants enfants dans Vue à partir d'un composant parent. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans le développement utilisant vue, nous faisons parfois référence à des composants externes, notamment des composants d'interface utilisateur (ElementUI, iview).

Lorsque la balise c9ccee2e6ea535a969eb3f532ad9fe89 a l'attribut scoped, son CSS ne s'applique qu'aux éléments du composant actuel.

Mais après avoir ajouté scoped dans le composant parent, le style du composant parent ne pénétrera pas dans le composant enfant, donc écrire le style du composant enfant dans le composant parent n'a aucun effet.

1. Supprimer scoped

Après avoir supprimé scoped du c9ccee2e6ea535a969eb3f532ad9fe89 écrit dans le composant parent, mais vous craignez peut-être que cela pollue le style global.

[Parce que nous savons que la bonne façon d'utiliser les styles globaux est d'utiliser un app.css global]

2. Mélangez les styles locaux et globaux

Vous pouvez utiliser des styles avec et sans portée dans un composant :

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

Nous écrivons le style qui doit être modifié dans le sous-composant dans le style global ci-dessus

3. Utilisez des sélecteurs à action en profondeur

Si vous souhaitez qu'un sélecteur dans un style étendu agisse "plus profondément", par exemple en affectant des sous-composants. , vous pouvez utiliser l'opérateur >>> :

<style scoped>
.a >>> .b {
 /* ... */
}
</style>

Certains préprocesseurs comme SASS ne peuvent pas analyser correctement >>> Dans ce cas, vous pouvez utiliser l'opérateur /deep/ à la place - il s'agit d'un alias pour >>>

OK, le contenu principal est constitué des points ci-dessus.

Les suppléments supplémentaires sont :

1 Le contenu DOM créé via v-html n'est pas affecté par les styles dans la portée, mais vous. Vous pouvez toujours les styliser via des sélecteurs d'action profonds

2. La portée CSS ne peut pas remplacer la classe

3 Utilisez soigneusement les sélecteurs descendants dans les composants récursifs

ci-dessus, je l'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Concept et utilisation du mode commande en JS (tutoriel détaillé)

Utiliser le sélénium pour capturer les informations sur les données Taobao

Comment implémenter une grille de carte à l'aide de Baidu Maps

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!