So wenden Sie einen benutzerdefinierten Hover-Effekt für Material-UI-Symbole an

Ziel dieses Artikels ist es, das Problem zu lösen, dass Material-UI-Symbole bei der Verwendung von CSS-Modulen nicht richtig auf benutzerdefinierte Hover-Effekte reagieren. Der Hauptgrund ist, dass die Standardstile von Material-UI-Komponenten eine höhere CSS-Priorität haben. Das Tutorial stellt zwei Lösungen im Detail vor: Eine besteht darin, den Modifikator „:global“ in Kombination mit der globalen übergeordneten Klasse zu verwenden, um die Priorität benutzerdefinierter Stile zu erhöhen. Die andere besteht darin, einen spezifischeren Selektor zu erstellen, indem benutzerdefinierte Symbole umschlossen werden. Mit diesen Methoden können Entwickler den Standardstil der Material-Benutzeroberfläche effektiv überschreiben und den gewünschten Interaktionseffekt erzielen.

Verständnis der Stilüberschreibungsherausforderungen für Material-UI-Symbole

Bei der Entwicklung mit React und Material UI in Kombination mit CSS-Modulen stehen Entwickler häufig vor einer Herausforderung: Beim Anwenden benutzerdefinierter Stile auf Material UI-Symbole (z. B. SettingsIcon in @mui/icons-material) werden die Stile insbesondere bei Hover-Effekten nicht wirksam. Dies liegt normalerweise nicht an den CSS-Modulen selbst, sondern an den CSS-Prioritätsregeln (Spezifitätsregeln).

Betrachten Sie die folgenden häufigen Versuche: Angenommen, wir haben ein Einstellungssymbol für die Material-Benutzeroberfläche und versuchen, über CSS-Module einen Rotations-Hover-Effekt hinzuzufügen.

JSX-Codebeispiel:

 importiere SettingsIcon aus „@mui/icons-material/Settings“;
CSS aus „./LandingPage.module.css“ importieren;

Funktion LandingPage() {
  zurückkehren (
    <div>
      <settingsicon classname="{css.settingsButton}"></settingsicon>
    </div>
  );
}

Standard-LandingPage exportieren;

Beispiel einer LandingPage.module.css-Datei:

 .settingsButton {
    Position: absolut;
    rechts: 20px;
    oben: 20px;
    Anzeige: Block;
    Höhe: 70px;
    Breite: 70px;
    Übergang: Transformation .7s Easy-in-out;
    Farbe: weiß;
}

.settingsButton:hover {
    transformieren: drehen (360 Grad);
}

Obwohl der obige Code logisch klar erscheint, stellen Sie im tatsächlichen Betrieb möglicherweise fest, dass der Hover-Effekt der Transformation nicht wie erwartet ausgelöst wird oder das Übergangsattribut durch den Standardstil der Material-Benutzeroberfläche überschrieben wird. Dies liegt daran, dass Material-UI-Komponenten normalerweise über einige Standardstile verfügen, die über spezifischere Selektoren oder direkt auf interne Elemente der Komponente angewendet werden können, wodurch ihre Priorität höher ist als die benutzerdefinierten Stile, die wir über das Attribut „className“ anwenden. Insbesondere das Übergangsattribut, die MuiSvgIcon-Root-Klasse der Material-Benutzeroberfläche, hat möglicherweise einen Standardübergang definiert und seine Priorität ist höher.

Lösung 1: Verwenden Sie den Modifikator :global, um die Priorität zu erhöhen

Der Schlüssel zur Lösung dieses Problems besteht darin, die Priorität der benutzerdefinierten CSS-Regel zu erhöhen, sodass sie die Standardstile von Material UI überschreibt. In CSS-Modulen können wir den Modifikator :global verwenden, um auf Elemente im globalen Bereich abzuzielen und spezifischere Selektoren zu erstellen.

Prinzip: Indem wir unsere CSS-Regeln in einen global vorhandenen Selektor für übergeordnete Elemente verschachteln (z. B. Ihr Anwendungsstammelement .App), können wir die Priorität des benutzerdefinierten Selektors effektiv erhöhen. Wenn CSS-Module :global(.App) .settingsButton verarbeiten, wird ein Selektor ähnlich wie .App .LandingPage_settingsButton__xyz generiert, der eine höhere Priorität hat als .LandingPage_settingsButton__xyz allein.

Korrigiertes LandingPage.module.css-Beispiel:

 /* Gehen Sie davon aus, dass Ihr Anwendungsstammelement einen globalen Klassennamen hat, z. B. .App */
:global(.App) .settingsButton {
  Position: absolut;
  rechts: 20px;
  oben: 20px;
  Anzeige: Block;
  Höhe: 70px;
  Breite: 70px;
  Übergang: Transformation 0,7 s Ease-in-out;
  Farbe: weiß;
}

:global(.App) .settingsButton:hover {
  transformieren: drehen (360 Grad);
}

Dinge zu beachten:

• .App-Klassenname: .App hier ist ein Beispiel. Sie müssen es durch den globalen Klassennamen der höchsten Ebene ersetzen, der tatsächlich in Ihrer Anwendung vorhanden ist und das Material-UI-Symbol umschließt. Wenn Sie sich nicht sicher sind, können Sie die Struktur der index.html oder der Hauptkomponente Ihrer App (z. B. App.js) überprüfen.
• Priorität: Dieser Ansatz überschreibt erfolgreich den Standardstil der Material-Benutzeroberfläche, indem er die Priorität des Selektors erhöht, indem er seine Komplexität erhöht (übergeordneter Selektor, untergeordneter Selektor).

Lösung 2: Verwenden Sie ein benutzerdefiniertes Wrapper-Element

Wenn Ihre App nicht über eine geeignete globale übergeordnete Klasse für die Verwendung durch :global verfügt oder Sie eine genauere Kontrolle über den Stilumfang wünschen, besteht ein weiterer effektiver Ansatz darin, einen benutzerdefinierten Wrapper (div oder ein anderes HTML-Element) für das Material-UI-Symbol hinzuzufügen und den Stil für diesen Wrapper zu definieren.

Prinzip: Indem wir ein Div mit einem benutzerdefinierten Klassennamen außerhalb des Material-UI-Symbols umschließen, können wir Stilregeln direkt auf dieses Div anwenden oder dieses Div als übergeordneten Selektor verwenden, um auf das innere Material-UI-Symbol abzuzielen. Diese Methode kann auch die Priorität benutzerdefinierter Stile effektiv erhöhen.

JSX-Codebeispiel (mit Wrapper):

 importiere SettingsIcon aus „@mui/icons-material/Settings“;
CSS aus „./LandingPage.module.css“ importieren;

Funktion LandingPage() {
  zurückkehren (
    <div classname="{css.iconWrapper}"> {/* Einen benutzerdefinierten Wrapper hinzufügen*/}
      <settingsicon classname="{css.settingsButton}"></settingsicon>
    </div>
  );
}

Standard-LandingPage exportieren;

Beispiel einer LandingPage.module.css-Datei (für Wrapper): In diesem Fall können wir den Hover-Effekt direkt auf den Wrapper anwenden, wenn die Größe des SettingsIcon fest ist und mit dem Wrapper übereinstimmt. oder um über den Wrapper als übergeordneter Selektor auf das SettingsIcon zu reagieren.

Methode A: Hover-Effekt auf Wrapper angewendet

 .iconWrapper {
    Position: absolut;
    rechts: 20px;
    oben: 20px;
    Anzeige: Flex; /* Flex oder Grid verwenden, um sicherzustellen, dass das interne Symbol zentriert ist */
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
    Höhe: 70px;
    Breite: 70px;
    Übergang: Transformation 0,7 s Ease-in-out;
    Farbe: weiß; /* Farbe kann auf das Symbol selbst angewendet werden*/
}

.iconWrapper:hover {
    transformieren: drehen (360 Grad);
}

/* Bei Bedarf können Sie die Farbe des Symbols separat festlegen*/
.iconWrapper .settingsButton {
    Farbe: weiß;
}

Diese Methode wendet den Rotationseffekt auf den gesamten Wrapper an und das Symbol dreht sich mit dem Wrapper.

Methode B: Der Hover-Effekt wird über einen Wrapper auf das Symbol angewendet

 .iconWrapper {
    Position: absolut;
    rechts: 20px;
    oben: 20px;
    Anzeige: Block;
    Höhe: 70px;
    Breite: 70px;
    /* Der Wrapper selbst dreht sich nicht, sondern liefert nur Positionierung und Größe*/
}

.iconWrapper .settingsButton {
    /* Der Stil hier hat eine höhere Priorität als der separate .settingsButton*/
    Übergang: Transformation 0,7 s Ease-in-out;
    Farbe: weiß;
}

.iconWrapper .settingsButton:hover {
    transformieren: drehen (360 Grad);
}

Dieser Ansatz wendet den Rotationseffekt genau auf das SettingsIcon selbst an, erhöht jedoch die Priorität des Selektors über den iconWrapper. Dies ist im Allgemeinen der empfohlene Ansatz, da er den Stil des Symbols direkt steuert.

Zusammenfassung und Best Practices

Beim Anwenden benutzerdefinierter Hover-Effekte auf Material UI-Symbole besteht die größte Herausforderung darin, die Priorität der Standardstile von Material UI zu überwinden. Hier sind die wichtigsten Erkenntnisse und Best Practices:

1. CSS-Priorität verstehen: Denken Sie immer daran, dass die Priorität der CSS-Regeln bestimmt, welcher Stil letztendlich wirksam wird. ID-Auswahl > Klassenauswahl/Attributauswahl/Pseudoklasse > Elementauswahl. Durch das Kombinieren von Selektoren werden Prioritäten gesammelt.
2. Die Verwendung von :global: Wenn Sie die internen Stile oder Standardübergangseigenschaften von Material UI überschreiben müssen, ist der Modifikator :global in Kombination mit einer globalen übergeordneten Klasse eine leistungsstarke und übersichtliche Lösung. Es kann die Priorität Ihrer CSS-Modulregeln effektiv erhöhen.
3. Verwenden Sie einen benutzerdefinierten Wrapper: Wenn keine geeignete globale übergeordnete Klasse vorhanden ist oder eine bessere Kapselung erforderlich ist, ist das Hinzufügen eines Wrappers mit einem benutzerdefinierten Klassennamen für das Material-UI-Symbol und die anschließende Verwendung dieses Wrappers zum Definieren oder Erweitern der Stilpriorität des internen Symbols eine weitere sehr praktische Methode.
4. Entwicklertools: Beherrschen Sie die Verwendung von Browser-Entwicklertools zur Überprüfung der berechneten Stile von Elementen. Dadurch können Sie erkennen, welche CSS-Regeln gelten und woher sie kommen, sodass Sie Prioritätskonflikte genauer lokalisieren und lösen können.
5. Vermeiden Sie !important: Obwohl !important das Überschreiben jedes Stils erzwingen kann, zerstört es die kaskadierende Natur von CSS, was die Wartung und das Debuggen des Stils erschwert. Sein Einsatz sollte vermieden werden, außer in seltenen Fällen, die nicht auf andere Weise gelöst werden können.

Mit der oben genannten Methode können Sie Material-UI-Symbolen flexibel und effektiv verschiedene benutzerdefinierte Hover-Effekte hinzufügen und so die Interaktivität und Ästhetik der Benutzeroberfläche verbessern.

Das obige ist der detaillierte Inhalt vonSo wenden Sie einen benutzerdefinierten Hover-Effekt für Material-UI-Symbole an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!