Les pages Vue modifient les styles de composants externes sans affecter les autres références de page

1. Ajoutez un sélecteur d'identification devant le sélecteur pour limiter

<template>
<div id = "wrapper">

</div>
</template>
<style>
#warp .el-dialog {
width: 800px
}
</style>
2 , 使用 / deep /

En vue, afin d'éviter que le style du composant parent n'affecte le style du composant enfant, nous ajouterons <style scoped> au style, de sorte que si le composant parent a le même nom de classe que le composant enfant ou lors de l'utilisation du sélecteur, il ne sera pas Affectera le style des composants enfants. Si le composant parent affecte le composant enfant, alors nous avons besoin de / deep /

<template>
<div id = "wrapper">

</ div>
</ template>
<style scoped>
/ deep / .el-dialog {
width: 800px
}
</ style>
Bien sûr, remplacez / deep / par >>> , Peut également obtenir le même effet 

Je suppose que tu aimes

Origine www.cnblogs.com/ckmouse/p/12720549.html
conseillé
Classement