styled modern normalize

Moderne Normalize.css für gestylerte Komponenten

Eine gemeinsame Importmethode für modern-normalize.css besteht darin, unbenannte Importe zu verwenden, die für Projekte mit Vanille - CSS oder Pre-Processors-Workflows wie SASS/LEEST und einem Bundler wie Webpack einwandfrei funktionieren.

Der gestaltete css -Normalize ist ein Proxy-Paket von modernen Normalisten. Dies ermöglicht es, es über injectGlobal oder eine andere gestaltete Komponente zu importieren und zu verwenden.

Das Paket basiert auf moderner Normalize.css Version 0.5.0. Die bereitgestellten Stile sind mit den gestalteten Komponenten V2, V3 und V4 kompatibel.

Erste Schritte

Installation

Fügen Sie das Paket als Abhängigkeit zu Ihrem Projekt hinzu:

npm install --save styled-modern-normalize

Führen Sie npm install aus dem Projektroot aus, um das Projekt zu starten und die Entwicklungs- und Laufzeitabhängigkeiten zu installieren. Beachten Sie, dass dies nicht das erforderliche Paket mit Styled-Komponenten installiert wird , das als Peer-Abhängigkeit definiert ist und separat installiert werden muss, wie im Abschnitt Peer-Abhängigkeiten unten beschrieben.

Peer -Abhängigkeiten

In diesem Paket werden API-Funktionen von gestymten Komponenten verwendet, die React-Komponenten zurückgeben.

Daher hängt dieses Paket von den als Peer-Abhängigkeiten definierten Komponenten und React-Paketen ab.

Linux & macOS -Benutzer können alle Peer -Abhängigkeiten einfach installieren, indem Sie den NPX verwenden, der mit NPM 5 oder höher ausgestiegen ist:

npx install-peerdeps styled-modern-normalize

Bei Verwendung von NPM <5 ist das NPX- Tool nicht eingesperrt, aber Benutzer können es einfach global installieren und dann den obigen Befehl ausführen oder das Installations-PeerDeps-Paket lokal/global installieren, um die Installation aller Peer-Abhängigkeiten zu verarbeiten.

 # Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps styled-modern-normalize

# …or globally.
npm install -g install-peerdeps
install-peerdeps styled-modern-normalize

Manuell

Alle Peer -Abhängigkeiten können auch manuell installiert werden (z. B. für Benutzer, die ein Microsoft Windows -basiertes System ausführen), indem die richtige Version jedes Pakets installiert wird:

npm info " styled-modern-normalize@latest " peerDependencies

Verwendung

Der gestaltete moderne Normalisieren kann verwendet werden, indem der Standard oder den Namen Export modernNormalize importiert wird.

 // With default export…
import modernNormalize from "styled-modern-normalize" ;

// …or via named export.
import { modernNormalize } from "styled-modern-normalize" ;

Um die Stile zu injizieren, wenn Sie gestylt-Komponenten v4 verwendet werden, kann die API-Funktion createGlobalStyle verwendet werden, die eine StyledComponent Component Reach-Komponente erzeugt:

 // Usage with the latest "styled-components" v4.
import { createGlobalStyle } from "styled-components" ;

const ModernNormalize = createGlobalStyle `
  ${ modernNormalize }
  /* ... */
` ;

// Use the generated component in your rendering logic to inject the styles.
/* ... */
< React . Fragment >
  < ModernNormalize />
</ React . Fragment > ;
/* ... */

Bei Verwendung von gestylerischen Komponenten V2 oder V3 können die Stile mit der injectGlobal -API injiziert werden:

 // Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components" ;

const cssBaseline = injectGlobal `
  ${ modernNormalize }
  /* ... */
` ;

Die Version von Modern-Normalize.css Dieses Paket basiert derzeit als MODERN_NORMALIZE_VERSION :

 import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize" ;

// Example:
console . log ( MODERN_NORMALIZE_VERSION ) ; // "0.5.0"

Entwicklungsworkflow

Führen Sie npm install aus dem Projektroot aus, um das Projekt zu starten und die Entwicklungs- und Laufzeitabhängigkeiten zu installieren. Um die Entwicklung mit automatischer Neukompilation in jeder Quelldateiänderung im src/ Verzeichnislauf zu beginnen

npm run dev

Das Projekt ist auch für das meldente Code -Formatierer konfiguriert, das viele Redakteure integrationsunterstützt bietet, um die Quelldatei automatisch auf Speichern formatieren zu können.

Gebäude

Ein Verteilungsaufbau kann durch Laufen erstellt werden

npm run dist

Durch kontinuierliche Integration werden am Circle CI und Travis CI stattfinden.

Testen

Linie

JavaScript-Quellen werden mit Eslint unter Verwendung der Arcticicestudio-Base-Konfiguration abgegeben, die mit dem ausgeführt werden kann

npm run lint:js

Markdown-Quellen werden mit dem Arcticicestudio-Preset mit Bemerkungspreis ausgegeben, das mit dem durchgeführt werden kann

npm run lint:md

Alle Stining -Aufgaben können mit ausgeführt werden

npm run lint

Beitragen

Lesen Sie den beitragenden Leitfaden, um sich über den Entwicklungsprozess und die Vorschläge zur Verbesserung von Vorschlägen und Berichten von Fehler zu informieren, wie man Pull -Anfragen und die StyleGeides des Projekts, das Zweigorganisation und das Versionsmodell einreicht.

Der Leitfaden enthält auch Informationen zu minimalen, vollständigen und überprüfbaren Beispielen und anderen Möglichkeiten, um zum Projekt beizutragen, z. B. die Verbesserung bestehender Probleme und das Feedback zu Problemen und Anfragen.

Copyright © 2018-Present Arctic Ice Studio & Sven Greb