Parce que la bibliothèque de composants d'elementUI est utilisée, une page utilise el-dialog et le style doit être modifié. Cependant, après avoir défini la portée dans <style>, le style ne prend pas effet.
Étant donné que la portée de Vue étiquette toutes les étiquettes de ce composant avec un attribut unique, cet attribut unique est également attaché lorsque le style prend effet. Cependant, tous les sous-composants appliqués par ce composant, à l'exception de l'étiquette racine, ne sont pas étiquetés avec cet attribut unique. Par conséquent, le style ne prendra naturellement pas effet.
vue ajoute automatiquement un attribut unique
Un attribut unique est ajouté, qui est le principe de vue visant à obtenir une isolation de style.
Si vous n'avez pas peur d'affecter d'autres pages, supprimez la portée et le style prendra effet.
Solution sans supprimer la portée :
J'ai vérifié la solution officielle
La solution officielle proposée par Vue est : Sélecteur d'action de profondeur
<style scoped>
::v-deep .el-dialog {
background-color: #0c1d3f;
}
</style>Vous pouvez également utiliser /deep/, >>>, ::v-deep.
/deep/ signalera une erreur dans vue 3.0, vous pouvez utiliser ::v-deep