Beheben Sie das Problem, dass der benutzerdefinierte CSS-Stil von ElementUI nicht wirksam wird

Beispielsweise gibt es ein Eingabefeld

<el-Eingabe
        ref="meineSuche"
        Klasse="meineSuche"
        Größe="klein"
        Platzhalter="Bitte Inhalt eingeben"
        Suffix-Symbol = "el-icon-search"
        v-Modell="Eingabe1">
</el-Eingabe>

Wenn kein benutzerdefinierter Stil hinzugefügt wird, sieht das Eingabefeld folgendermaßen aus

Ich hoffe es

Suchen Sie über die Entwicklertools von Google Chrome den entsprechenden Klassennamen style.el .el-input__inner
Ich habe jedoch festgestellt, dass das el-input Tag vor html wie folgt analysiert wurde, wobei ich mySearch hinzugefügt habe. Daher können wir das Element mySearch finden. Der Klassenname des Unterelements, der geändert werden muss, lautet .el-input__inner

Wenn Sie untergeordnete Elemente über CSS-Selektoren auswählen, können Sie dies nicht auf die Elemente innerhalb der untergeordneten Elemente anwenden. Im Folgenden wird die Stiftsyntax verwendet. Folgendes ist eine falsche Schreibweise:

<style scoped lang="Stift" rel="stylessheet/Stift">
    .meineSuche .el-input__inner
        Rahmenradius 20px
</Stil>

So funktioniert es

Lösung 1: Sie müssen ein /deep/ in der Mitte hinzufügen, um

<style scoped lang="Stift" rel="stylessheet/Stift">
    .mySearch /deep/ .el-input__inner
        Rahmenradius 20px
</Stil>

Lösung 2: scoped entfernen. Diese Methode kann den gewünschten Effekt erzielen, wird aber nicht empfohlen!

Im Allgemeinen liegt der Grund, warum es nicht funktioniert, darin, dass dieser scope dazu führt, dass der Bereich bei den internen Unterkomponenten nicht funktioniert. Die endgültige Lösung des Problems besteht darin, /deep/ hinzuzufügen, damit es bei den Unterkomponenten funktioniert.

Dies ist das Ende dieses Artikels über die Lösung des Problems, dass der benutzerdefinierte CSS-Stil von ElementUI nicht wirksam wird. Weitere relevante Inhalte zum Thema „ElementUI-Stil wird nicht wirksam“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!