Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

Beim Entwickeln von Miniprogrammen mit dem nativen Framework bin ich auf ein Problem gestoßen: Die in app.wxss definierten globalen Stile waren in benutzerdefinierten Komponenten nicht wirksam. Später stellte sich heraus, dass dies durch die Konfiguration der Isolierung des Miniprogrammkomponentenstils verursacht wurde.

Zu lang zum Lesen

Fügen Sie der JSON-Datei der Komponente die folgende Konfiguration hinzu und der globale Stil wird wirksam.

//komponente.json
"styleIsolation": "shared anwenden"

Wenn Sie die Konfiguration lieber in einer JS-Datei vornehmen möchten oder die Versionsnummer < 2.10.1 ist, können Sie die Konfiguration mit der gleichen Wirkung auch in eine JS-Datei schreiben.

//komponente.js
Komponente({
  Optionen:
    styleIsolation: "shared anwenden"
  }
})

Wenn die Versionsnummer < 2.6.5 ist, können Sie anstelle von styleIsolation die folgende Konfiguration verwenden: „apply-shared“

//komponente.js
Komponente({
  Optionen:
    addGlobalClass: true
  }
})

Isolierung des Komponentenstils

Die styleIsolation der Komponente hat drei optionale Werte:

• isoliert: Der Standardwert, die Stile innerhalb und außerhalb der Komponente beeinflussen sich nicht gegenseitig
• apply-shared: Empfängt externe Stile (einschließlich übergeordneter Seiten und globaler Stile), aber die Stile innerhalb der Komponente wirken sich nicht auf externe Stile aus
• shared: Empfangen Sie externe Stile, und die Stile in der Komponente werden auf der Seite geteilt

Demo-Test

Für ein intuitiveres Erlebnis habe ich eine Demo geschrieben und ein einfaches Experiment durchgeführt.

Definieren Sie eine Komponente comp und führen Sie sie im Seitenindex ein:

<!-- comp.wxml -->
<Ansicht Klasse="test1 testbox">comp1</Ansicht>
<view class="test2 testbox">comp2</view>
<view class="test3 testbox">comp3</view>

<!-- index.wxml -->
<Komp. />
<view class="test3 testbox">index3</view>

Definieren Sie dann die Farben von Test1, Test2 und Test3 als Rot, Grün und Blau in der globalen Welt sowie in der Seiten- und Komponentenwelt (der Stil der Testbox wird weggelassen):

/* App.wxss */
.test1 {
  Hintergrundfarbe: hellrosa;
}

/* Komponenten/index.wxss */
.test2 {
  Hintergrundfarbe: hellgrün;
}

/* Komponenten/comp.wxss */
.test3 {
  Hintergrundfarbe: hellblau;
}

Anschließend werden für die styleIsolation-Eigenschaft der Komponente unterschiedliche Werte übernommen und die Ergebnisse sind wie folgt:

Wie Sie sehen, sind im isolierten Standardmodus weder die übergeordnete Seite noch der globale Stil wirksam. Im gemeinsam genutzten Anwendungsmodus können die Seiten- und globalen Stile auf die Komponente angewendet werden. Im gemeinsam genutzten Modus wird der Komponentenstil wiederum auf die übergeordnete Seite angewendet.

Priorität

Darüber hinaus lautet die Stilpriorität nach dem Testen für denselben Selektor Komponentenstil > Seitenstil > globaler Stil, was für Komponenten grundsätzlich intuitiv ist. Wenn die Komponente jedoch gemeinsam genutzt wird, überschreibt der darin enthaltene Stil auch den Stil auf der Seite, was etwas seltsam ist.

Zusammenfassend empfehle ich persönlich, den gemeinsam genutzten Modus mit Vorsicht zu verwenden, sofern kein besonderer Bedarf besteht, und zu versuchen, Selektorkonflikte und gegenseitiges Überschreiben zu minimieren, um unnötige übernatürliche Unfälle zu vermeiden. Stile, die gemeinsam genutzt werden müssen, können je nach Situation auf die globale Ebene extrahiert oder durch Importieren von CSS-Dateien implementiert werden.

Isolationskonfiguration von Seiten

Da die Seiten des Miniprogramms eigentlich Komponenten sind, kann auch die Eigenschaft styleIsolation festgelegt werden. Im Gegensatz zu benutzerdefinierten Komponenten ist der Standardwert der Seite „share“, sodass globale Stile standardmäßig auf die Seite angewendet werden können.

Darüber hinaus werden der Seite drei weitere Attributwerte hinzugefügt. Obwohl die Dokumentation die jeweiligen Beschreibungen enthält, war ich nach dem Experimentieren sehr verwirrt und verstand ihre genauen Funktionen und Unterschiede überhaupt nicht. Es gab sogar einen mysteriösen Fehler, dass der eigene Stil der Seite ungültig wurde, nachdem die Seite auf isoliert / seitenisoliert eingestellt wurde. Möglicherweise liegen Probleme bei der Implementierung vor. Daher wird empfohlen, die StyleIsolation-Konfiguration der Seite nicht einfach so zu ändern. Wenn Sie interessiert sind, können Sie auf den Link am Ende des Artikels klicken, um selbst zu lernen und zu experimentieren.

Es gibt nur eine relativ sichere Option. Nach der Konfiguration von page-shared blockiert die Seite (und die darin enthaltenen Komponenten) die globalen Stile in app.wxss, und die Auswirkungen auf andere Aspekte sollten gering sein. Sie können es bei Bedarf versuchen.

Verweise

Offizielle WeChat-Dokumente · Miniprogramme

Damit ist dieser Artikel zur Lösung des Problems, dass globale Stile auf benutzerdefinierte Komponenten von Miniprogrammen nicht wirksam werden, abgeschlossen. Weitere Informationen zum Problem, dass globale Stile auf Miniprogrammkomponenten nicht wirksam werden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!