styled
1.0.0
Minimale CSS-in-JS-Komponentenlösung für Reaktionen.
Es gibt auch einige Dinge, die Nichtgänger sind.
as Eigenschaft .withComponent().attrs() Methode)defaultProps . import { styled } from '@minstack/styled' ;Stylen Sie einen beliebigen HTML -Elementtyp mit dem Tag -Namen. Die gestaltete Komponente unterstützt alle gleichen Requisiten (enthaltene Refs, die weitergeleitet werden), die das HTML -Element unterstützt.
const StyledComponent = styled ( 'div' ) `
color: black;
` ;Der Tag der Tag -Namensmethode wird ebenfalls unterstützt.
const StyledComponent = styled . div `
color: black;
` ; Style jede React -Komponente, die eine className -Eigenschaft akzeptiert oder die Stile einer bereits gestalteten Komponente erweitert.
const StyledComponent = styled ( Component ) `
color: black;
` ; Die gestaltete Komponente können zusätzliche Eigenschaften hinzugefügt werden, indem der generische Parameter der Vorlagenzeichenfolge festgelegt wird. Im Allgemeinen sollten Stileigenschaften mit $ vorangestellt werden, um anzuzeigen, dass sie nur zum Styling verwendet werden. Jeder Eigenschaftsname, der mit dem $ Charakter beginnt, wird nicht als Attribut an das zugrunde liegende HTML -Element weitergeleitet.
interface ComponentStyleProps {
$font ?: string ;
}
const StyledComponent = styled ( 'div' ) < ComponentStyleProps > `
font-family: ${ ( props ) => props . $font } ;
` ; Verwenden Sie das gestaltete Dienstprogramm styled.global , um globale Stilkomponenten zu erstellen.
const GlobalStyle = styled . global `
body,
html {
margin: 0;
padding: 0;
}
` ;Stileigenschaften können auch zu globalen Stilen hinzugefügt werden.
interface GlobalStyleProps {
$font ?: string ;
}
const GlobalStyle = styled . global < GlobalStyleProps > `
body,
html {
font-family: ${ ( props ) => props . $font } ;
}
` ; Das Definieren von Keyframes oder Schriftarten ist das gleiche wie das Definieren eines anderen Stils. Da sie nicht in eine bestimmte Komponente skopiert werden, sollten sie wahrscheinlich nur in globalen Stilen verwendet werden. Um Namenskollisionen zu verhindern, verwenden Sie das mitgelieferte getId Dienstprogramm, um CSS-sichere einzigartige Namen zu generieren.
const openSansFont = getId ( 'font/open-sans' ) ;
const slideInAnimation = getId ( 'keyframes/slide-in' ) ;
const GlobalStyle = styled . global `
@font-face {
font-family: ${ openSansFont } ;
src: url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
}
@keyframes ${ slideInAnimation } {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
` ;
const StyledComponent = styled ( 'div' ) `
font-family: ${ openSansFont } ;
animation-name: ${ slideInAnimation } ;
` ; Übergeben Sie einen Themenhaken (oder eine beliebige Funktion), die ein Thema an den Dienstprogramm createStyled zurückgibt. Der Themenwert wird dann verfügbar sein, da das zweite Argument an einen beliebigen Funktionswert für die Styled -Vorlagenzeichenfolge übergeben wird.
// File: styled-with-theme.ts
import { createStyled } from '@minstack/styled' ;
export const styled = createStyled ( useTheme ) ; Dies schafft eine stark styled Instanz. Verwenden Sie diese Instanz anstelle der integrierten Instanz.
import { styled } from './styled-with-theme' ;
const ThemedComponent = styled ( 'div' ) `
color: ${ ( props , theme ) => theme . fgColor } ;
background-color: ${ ( props , theme ) => theme . bgColor } ;
` ; Alle CSS -Plus -Nistungen werden unterstützt.
Verwenden Sie CSS-Eigenschaften auf der oberen Ebene der markierten Vorlage (kein umgebender Block), um Stile direkt auf das zu stylen styledierte HTML-Element oder -Komponente anzuwenden.
const StyledComponent = styled ( 'div' ) `
color: red;
` ;Top-Level-CSS-Eigenschaften werden in einen dynamischen Klassenwählers eingewickelt
. _rmsds7y13d_ {
color : red;
}Verwenden Sie CSS -Regelblöcke, um Kinder der gestalteten Komponente zu stylen.
const StyledComponent = styled ( 'div' ) `
.child {
color: blue;
}
` ;Die gestaltete dynamische Klasse wird automatisch an alle Selektoren vorbereitet, um sie "Scoped" zu machen.
. _rmsds7y13d_ . child {
color : blue;
}Jede gestaltete Komponente (mit Ausnahme globaler Stile) kann als Selektor verwendet werden.
const StyledComponentA = styled ( 'div' ) `
color: blue;
` ;
const StyledComponentB = styled ( 'div' ) `
${ StyledComponentA } {
background-color: yellow;
}
` ; Jede gestaltete Komponente verfügt über eine einzigartige statische Klasse, die zur Erstellung erzeugt wird. Die toString() -Methode der gestalteten Komponente gibt für diese statische Klasse eine Selektorstring (z. B. "._rmsss7y13d_" ) zurück.
. _rmsds7y13d_ . _rmsss7y13d_ {
color : red;
} Die statische Klasse wird aus dem Anzeignamen der Komponente, dem statischen Teil der Stilvorlage, statischer Klassen (bei der Erweiterung einer anderen gestalteten Komponente) und der Anzahl der zuvor erstellten Komponenten generiert, die dieselbe "Thumbprint" teilen. In den meisten Fällen sollte dies statische Klassen über SSR- und Kundenrender stabil machen. Wenn SSR -Probleme der statischen Klasse auftreten, ist dies wahrscheinlich auf Komponenten mit demselben Fingerabdruck zurückzuführen, der eine instabile Erstellungsreihenfolge hat. Ändern Sie den displayName mit der Methode .withConfig() um den Fingerabdruck der problematischen Komponente einzigartig zu machen.
const StyledComponent = styled . div . withConfig ( { displayName : 'StyledComponent' } ) `
color: red;
` ;Nestregelblöcke, um komplexere Selektoren zu erstellen.
const StyledComponent = styled ( 'div' ) `
.child {
color: blue;
.grandchild {
color: green;
}
}
` ;Genauso wie die gestylerte dynamische Klasse auf oberste Selektoren vorbereitet wird, werden auch Eltern-Selektoren, die auf Kinderauswahl vorbereitet sind.
. _rmsds7y13d_ . child {
color : blue;
}
. _rmsds7y13d_ . child . grandchild {
color : green;
} Übergeordnete Selektorreferenzen ( & ) arbeiten genauso wie in SCSS/SASS. Das einzige Detail ist, dass bei der Verwendung eines übergeordneten Selektors bei der Stilwurzel (nicht in einem übergeordneten Block) die einzigartige Stilklasse des aktuellen Stils bezieht, der implizite/virtuelle Elternblock -Selektor für den Stil ist.
const StyledComponent = styled ( 'div' ) `
&& {
color: red;
}
&:hover {
color: blue;
}
.parent & {
color: green;
}
` ; Alle CSS-Rules werden unterstützt (mit Ausnahme von @charset , was in <style> Elementen nicht erlaubt ist).
const StyledComponent = styled ( 'div' ) `
@media screen and (min-width: 900px) {
color: red;
}
.child {
@media screen and (min-width: 600px) {
.grandchild {
color: blue;
.adopted & {
color: green;
}
}
}
}
` ;AT-Rules werden nach Bedarf gehoben, und die Elternauswahl werden genauso behandelt, wie sie ohne die intervenierende AT-Rule wären.
@media screen and ( min-width : 900 px ) {
. _rmsds7y13d_ {
color : red;
}
}
@media screen and ( min-width : 600 px ) {
. _rmsds7y13d_ . child . grandchild {
color : blue;
}
. adopted . _rmsds7y13d_ . child . grandchild {
color : green;
}
} Wenn ein CSS -Eigenschaftswert "leer" ist (leere Zeichenfolge, false , null , undefined oder "" ), wird die gesamte Eigenschaft aus dem Stil weggelassen.
const StyledComponent = styled ( 'div' ) `
color: ${ null } ;
background-color: red;
` ;Die Farbeigenschaft ist nicht enthalten, da sie keinen Wert hat.
. _rmsds7y13d_ {
background-color : red;
} Stile können sowohl Block ( /* */ ) als auch Zeilenkommentare ( // ) enthalten. Kommentare sind nie in gerenderten Stylesheets enthalten.
const StyledComponent = styled ( 'div' ) `
// This is a comment.
/* And so...
...is this. */
` ; Die Funktion styled.string -markierte Vorlagenfunktion gibt eine einfache Stilzeichenfolge zurück, wobei alle Werte interpoliert sind. Es sind nur statische Werte zulässig (keine Funktionen). Leere Eigenschaftswerte ( null , undefined , false und "" ) funktionieren genauso wie in gestalteten Komponenten, und veranlassen, dass die Eigenschaft weggelassen wird.
const fontHelper = styled . string `
font-family: Arial, sans-serif;
font-weight: 400;
font-size: ${ size } ;
` ;
// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) `
${ fontHelper }
color: red;
` ; Der styled.string Helfer hat keine Nebenwirkungen und leistet nur sehr wenig Arbeit. Daher ist es auch sicher, in Funktionen zu verwenden.
const shadow = ( depth : number ) => {
return styled . string `
-moz-box-shadow: 0 ${ depth } px ${ depth } px black;
-webkit-box-shadow: 0 ${ depth } px ${ depth } px black;
box-shadow: 0 ${ depth } px ${ depth } px black;
` ;
} ;
// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) < { $shadowDepth : number } > `
${ ( props ) => shadow ( props . $shadowDepth ) }
color: red;
` ; Verwenden Sie die StyledTest -Wrapper, um Schnappschüsse mit stabilen Klassennamen und Stilinformationen zu erstellen.
const container = render ( < MyStyledComponent /> , { wrapper : StyledTest } ) ;
expect ( container ) . toMatchSnapshot ( ) ; // Snapshot
<div>
<div
class="_test-dynamic-0_ _test-static-0_"
>
Hello, world!
</div>
<style>
._test-dynamic-0_ {
padding: 1rem;
}
</style>
</div>
Ein StyledProvider kann den Standard cache , manager und renderer überschreiben. Für den Standardbetrieb ist kein Anbieter erforderlich.
const cache = createStyledCache ( ) ;
const manager = createStyledManager ( ) ;
const renderer = createStyledRenderer ( ) ;
render (
< StyledProvider cache = { cache } manager = { manager } renderer = { renderer } >
< App />
</ StyledProvider > ,
) ; Die StyledTest Komponente ist ein vorkonfiguriertes StyledProvider , der Testversionen aller drei Ressourcen injiziert, um Klassennamen und Erfassungsstile zu ersetzen.
HINWEIS: Der bereitgestellte Cache, Manager und Renderer dürfen sich im Laufe der Lebensdauer einer gestalteten Komponente nicht ändern. Ein Fehler wird ein Fehler geworfen (oder in der Produktion angemeldet), wenn sie mutieren.
Verwenden Sie createSsrStyledManager und den StyledProvider um Stile zu erfassen, wenn Sie die Anwendung auf dem Server rendern.
const manager = createSsrStyledManager ( ) ;
const html = renderToString (
< StyledProvider manager = { manager } >
< App />
</ StyledProvider > ,
) ;
const html = `
<!doctype HTML>
<html>
<head>
${ manager . getStyleTags ( ) }
</head>
<body>
<div id="root">
${ html }
</div>
</body>
</html>
` ; Die getStyleTags() -Methode des SSR -Managers gibt eine einzelne HTML -Zeichenfolge zurück, die nur <style> Tags enthält. Es gibt auch Methoden getStyleElement() (React Elements Array) und getCss() (CSS -Saiten -Arrays).
Verwenden Sie createStyledManager (oder createSsrStyledManager ) und den StyledProvider , um einen nonce für alle injizierten Stile zu setzen.
const manager = createStyledManager ( nonce ) ;
render (
< StyledProvider manager = { manager } >
< App />
</ StyledProvider > ,
) ; | Besonderheit | Minstack gestylt | Goober | Gestaltete Komponenten | Emotion | |
|---|---|---|---|---|---|
| Bibliothek | |||||
| Bündelgröße (ca. KB) [1] | 2.8 | 1.2 | 13.3 | 9.1 | |
| Null Abhängigkeiten | ? | ? | ? | ? | |
| Typscript nativ | ? | ? | ? | ? | |
| API | |||||
| Tagged Vorlagenstile | ? | ? | ? | ? | |
| Dynamische Stile | ? | ? | ? | ? | |
| Objektstile | ? | ? | ? | ? | |
| Globale Stile | ? | ? | ? | ? | |
Polymorphismus ( as ) | ? | ? | ? | ? | |
Eigenschaft Mapping ( attrs ) | ? | ? | ? | ? | |
| Themen [2] | ? | ? | ? | ? | |
| SSR | ? | ? | ? | ? | |
| Schnappschusstests | ? | ? | ? | ? | |
| Stil | |||||
| Basic CSS -Syntax [3] | ? | ? | ? | ? | |
CSS @media | ? | ? | ? | ? | |
CSS @keyframes | ? | ? | ? | ? | |
CSS @font-face | ? | ⭕ | ⭕ | ? | |
CSS @import | ? | ⭕ | ? | ? | |
Andere CSS @ Regeln | ? | ⭕ | ⭕ | ⭕ | |
| Anbieter -Präfix [4] | ? | ? | ? | ? | |
| Regelnistung | ? | ? | ? | ? | |
Elternauswahl ( & ) | ? | ? | ? | ? | |
| Styled Component Selektoren [5] | ? | ? | ? | ? |
styled Export (nach Baumschütteln, Minifikation und GZIP), berechnet mit dem Webpack-Bundle-Analysator. Goober ist dieser Lösung sehr ähnlich. Es ist genauso schnell, kleiner und unterstützt ein paar zusätzliche Funktionen (Objektstile und die as -Eigenschaft). Was sind Goobers Nachteile und warum sollte ich das stattdessen verwenden?
StyledTest -Wrapper -Komponente, die nicht nur Snapshot -Tests ermöglicht, sondern auch auf eine Weise, die agnostisch ist.setup() -Funktion, die die einzelne globale Instanz der API konfiguriert, und dies ändert den Themenart nicht. Die Erweiterung des Themenarts kann mit der Verschmelzung von Deklarationen erreicht werden, dies ist jedoch wieder global und nicht sehr sicher. Diese Bibliothek liefert die Fabrik createStyled() , die eine neue API -Instanz zurückgibt , die ein stark typisiertes Thema hat.styled.div anstelle von styled('div') ) zu aktivieren. Diese Bibliothek unterstützt styled.<tag> ohne Kompilierzeitunterstützung.setup() bei der Verwendung von React. Diese Bibliothek zielt auf Preact preact/compat bei der Verwendung von Preact.Diese Bibliothek ist übereinstimmend und lässt einige Funktionen aus, die Goober unterstützt. Dies soll die Anzahl der alternativen Möglichkeiten verringern, wie gestaltete Komponenten entworfen werden können, wodurch die Code -Konsistenz erhöht und insgesamt eine bessere Entwicklererfahrung (DX) bietet. Das Entfernen von Unterstützung für zwei verschiedene Möglichkeiten, um dasselbe zu erreichen, bedeutet auch, dass die Größe der Bibliothek und die Laufzeit im Laufe der Laufzeit reduziert und/oder für verbesserte Kernmerkmale zugeordnet werden und dass die Bibliothek insgesamt mehr wartbar ist.
as -Eigenschaft für die Änderung des zugrunde liegenden Komponententyps der gestalteten Komponente. Diese Bibliothek ist nicht darauf zurückzuführen, dass sie von Natur aus unsicher eingeben, und die Verwendung von Stilhelfern (z. B. das styled.string Dienstprogramm) bietet eine bessere Möglichkeit, Stile wiederzuverwenden.Siehe das Skript von Benchmark.js für die Benchmark -Implementierung.
| Bibliothek | Op/s |
|---|---|
| Minstack gestylt | 144.970 |
| Goober | 142.028 |
| Emotion | 124.681 |
| Gestaltete Komponenten | 118.072 |
getId akzeptiert ein optionales Namespace-Argument (neu angepasst).withConfig() statische Methode zu gestyltem VorlagengetId und Dynamic Class Hashesstyled.div Alternative zu styled('div') )useInsertionEffectstyled.stringStyledProvider hinzugefügtcreateSsrStyledManager )StyledTest )getId akzeptiert kein Argument mehrstyled.mixinrenderStylesToString entfernt
