Formatbearbeitung für CSS-in-JS-Frameworks

Artikel
03/21/2023

Auf der Registerkarte Formatvorlagen können Sie Deklarationen für eine Stilregel auf eine Weise kopieren, die für JavaScript formatiert ist und zum Einfügen in eine JavaScript-Datei bereit ist. Dies schließt Stilregeln ein, die durch CSS-in-JS-Funktionsaufrufe definiert wurden. Sie können auch Stilregeln bearbeiten, die ursprünglich durch einen CSS-in-JS-Funktionsaufruf definiert wurden.

Kopieren von Stilregeldeklarationen zum Einfügen mit JavaScript-Syntax

Im Bereich Formatvorlagen können Sie Deklarationen für eine Stilregel auf eine Weise kopieren, die für JavaScript formatiert ist und zum Einfügen in eine JavaScript-Datei bereit ist.

Wenn Sie CSS-in-JS-Bibliotheken verwenden, können Sie CSS-Deklarationen (eine CSS-Eigenschaft und einen -Wert) kopieren, sodass sie automatisch für JavaScript formatiert werden. Sie müssen das kopierte CSS nicht manuell bearbeiten, um der JavaScript-Syntax zu entsprechen. Sie können eine einzelne CSS-Deklaration oder alle Deklarationen in einer Stilregel kopieren und dann ohne Syntaxprobleme direkt in eine JavaScript-Datei einfügen.

So kopieren Sie eine Stilregel als JavaScript:

Öffnen Sie in DevTools das Tool Elemente , und klicken Sie dann auf die Registerkarte Formatvorlagen .
Klicken Sie mit der rechten Maustaste auf eine Deklaration in einer Formatregel, und wählen Sie dann Deklaration als JS kopieren oder Alle Deklarationen als JS kopieren aus.
Fügen Sie das kopierte CSS in eine JavaScript-Datei in Ihrem Text-Editor ein, z. B. Visual Studio Code. Beispiel: '--more-link': 'lime'.

Weitere Informationen zum Anzeigen und Ändern von CSS finden Sie in der Referenz zu CSS-Features.

Bearbeiten von Stilregeln, die ursprünglich von einer CSSOM-Funktion definiert wurden

Der Bereich Formatvorlagen unterstützt die Bearbeitung von Formatvorlagen, die mit den CSSOM-APIs (CSS OBJECT Model) erstellt wurden. Viele CSS-in-JS-Frameworks und Bibliotheken verwenden die CSS-Objektmodell-APIs im Hintergrund, um Stile zu erstellen.

Sie können in JavaScript hinzugefügte Formatvorlagen mithilfe der CSSStyleSheet -Schnittstelle bearbeiten. Dies ist eine Möglichkeit zum Erstellen und Verteilen wiederverwendbarer Stile bei Verwendung von Shadow DOM. Weitere Informationen finden Sie unter Die CSSStyleSheet Schnittstelle im CSS-Objektmodell (CSSOM).

Beispiel

In diesem Beispielcode werden Stilregeln zunächst durch Aufrufen einer CSSOM-Funktion (CSSOM) definiert, und dann werden die Formatvorlagenregeln im Bereich Formatvorlagen bearbeitet. Das CSSStyleSheet -Objekt enthält die CSSOM-APIs, z insertRule(). B. . Die h1 Stile, die ursprünglich von einer CSSStyleSheet Funktion hinzugefügt wurden, können dann im Bereich Formatvorlagen bearbeitet werden.

//Add CSS-in-JS button

function addStyle() {
  const sheet = new CSSStyleSheet();
  sheet.insertRule(`h1 {
    background: pink;
    text-transform: uppercase;
  }`);
  document.adoptedStyleSheets = [sheet];
}

In diesem Beispiel wird das Ändern der background Eigenschaft der h1 Formatvorlagen veranschaulicht, die von der CSS-Objektmodellfunktion insertRule()hinzugefügt werden. Die background Farbe wird zunächst durch Aufrufen einer CSS-Objektmodellfunktion festgelegt und kann dann mithilfe des Bereichs Formatvorlagen von pink in lightblue geändert werden.

Ändern der Hintergrundeigenschaft der mit

Testen Sie dieses Feature mit einem Beispiel, das CSS-in-JS verwendet.

Was ist CSS-in-JS?

Dieser Abschnitt ist ein Auszug aus dem Blogbeitrag CSS-in-JS-Unterstützung in DevTools.

Hier ist, was wir mit CSS-in-JS meinen und wie es sich von regulärem CSS unterscheidet. Die Definition von CSS-in-JS ist etwas vage. Im weitesten Sinne handelt es sich um einen Ansatz zum Verwalten von CSS-Code mit JavaScript. Dies könnte beispielsweise bedeuten, dass der CSS-Inhalt mithilfe von JavaScript definiert wird und die endgültige CSS-Ausgabe von der App on-the-fly generiert wird.

Im Kontext von DevTools bedeutet CSS-in-JS, dass der CSS-Inhalt von den CSS-Objektmodell-APIs in die Seite eingefügt wird. Reguläres CSS wird mithilfe von - oder <link> -<style>Elementen eingefügt und verfügt über eine statische Quelle (z. B. einen DOM-Knoten oder eine Netzwerkressource). Im Gegensatz dazu verfügt CSS-in-JS häufig nicht über eine statische Quelle.

Ein Sonderfall ist hier, dass der Inhalt eines <style> Elements mithilfe der CSS-Objektmodell-API aktualisiert werden kann, wodurch die Quelle nicht mehr mit dem tatsächlichen CSS-Stylesheet synchronisiert wird.

Wenn Sie eine CSS-in-JS-Bibliothek (z. B. styled-component, Emotion oder JSS) verwenden, kann die Bibliothek Stile mithilfe von CSS-Objektmodell-APIs im Hintergrund einfügen, je nach Entwicklungsmodus und Browser.

Sehen wir uns einige Beispiele an, wie Sie ein Stylesheet mithilfe der CSS-Objektmodell-API einfügen können, ähnlich wie bei einigen CSS-in-JS-Bibliotheken.

// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

Sie können auch ein völlig neues Stylesheet erstellen:

// Create a completely new stylesheet
const sheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

CSS-Unterstützung in DevTools

In DevTools ist das am häufigsten verwendete Feature beim Umgang mit CSS der Bereich Formatvorlagen . Im Bereich Formatvorlagen können Sie anzeigen, welche CSS-in-JS-Regeln für ein bestimmtes Element gelten. Sie können auch die CSS-in-JS-Regeln bearbeiten und die Änderungen auf der Seite in Echtzeit anzeigen.

Der Bereich Formatvorlagen unterstützt CSS-Regeln, die Sie mithilfe der CSS-Objektmodell-APIs ändern können. CSS-in-JS-Formatvorlagen werden manchmal als konstruiert beschrieben, um anzugeben, dass diese Stile mithilfe von Web-APIs erstellt wurden.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Alex Rudenko geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

Freigeben über