Unser Team verwendet
gestylte Komponenten , um
reaktionsfähige Komponenten zu stylen.
Es gibt bereits Artikel über gestaltete Komponenten auf Habré, daher werden wir nicht näher darauf eingehen.
Einführung in gestaltete KomponentenBesser, schneller, leistungsfähiger: Styled-Components v4Nachdem wir viele Komponenten geschrieben hatten, stellten wir fest, dass wir in fast jeder Komponente doppelte Eigenschaften kopieren.
Zum Beispiel haben wir in vielen Komponenten so geschrieben:
padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'};
Gestyltes System
Das Kopieren doppelter Eigenschaften wurde langsam ärgerlich, und wir haben doppelte Codeteile in separate wiederverwendbare Funktionen gezogen. Aber ich dachte, dass vielleicht jemand so etwas schon vor uns implementiert hat und wahrscheinlich schöner und universeller. Ich begann zu googeln und fand ein
gestyltes System .
Styled-System bietet eine Reihe von Stilmerkmalen. Jede Stilfunktion bietet ihre eigenen Eigenschaften, mit denen Elemente basierend auf den im Anwendungsthema definierten Werten formatiert werden. Das gestaltete System verfügt über eine umfangreiche API mit Funktionen für die meisten CSS-Eigenschaften.
Beispiel eines gestylten Systems basierend auf gestalteten Komponenten
import { space, width, fontSize, color } from 'styled-system'; import styled, { ThemeProvider } from 'styled-components'; import theme from './theme'; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `; render( <ThemeProvider theme={theme}> <Box p={3} bg="whites.10" color="orange"> This is a Box </Box> </ThemeProvider>, );
Hauptvorteile
- Fügt Eigenschaften hinzu, die Sie in Ihren eigenen Designs verwenden können.
- Schnelle Einstellung von Schriftgröße, Rand, Abstand, Breite und anderen CSS-Eigenschaften über Requisiten
- Skalierbarkeit der Typografie
- Skalierbarkeit von Rand und Polsterung
- Unterstützung für jede Farbpalette
- Funktioniert mit den meisten CSS-in-JS-Bibliotheken, einschließlich gestylter Komponenten und Emotionen
- Wird von Rebass , Rebass Grid und Priceline Design System verwendet
Themen verbinden
Oben habe ich ein Codebeispiel bereitgestellt, das ThemeProvider verwendet. Wir geben unser Thema an den Anbieter weiter und das gestaltete System greift über Requisiten darauf zu.
Ein Beispiel für unser Thema
export const theme = { fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], space: [
Das gestaltete System versucht, den Wert im Designobjekt basierend auf den übergebenen Eigenschaften der Komponente zu finden. Das tiefe Verschachteln von Eigenschaften wird unterstützt. Wenn der übertragene Wert nicht im Thema gefunden wird, wird der Wert so interpretiert, wie er ist.
Zum Beispiel haben wir die Komponente color = "red" übergeben. Das Themenobjekt enthält keinen color.red-Wert, aber der Rotwert wird als Rot in CSS übersetzt. Nach der Transpilation im Inspektor werden wir sehen
color: red;
Andere Beispiele für die Verwendung von Themenwerten
Reaktionsstile
Übergeben Sie einfach ein Array von Werten, um die Reaktionseigenschaften schnell zu beschreiben
<Box width={[ 1,
Varianten
Mit dem gestalteten System können wir wiederverwendbare Objekte in unserem Thema definieren, die Farbsätze, Textstile usw. enthalten. Zum Beispiel haben wir in unserem obigen Thema
Wir verwenden Optionen für die Größen und Farben der Schaltflächen.
buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` }
Implementierung der Option:
export const buttonSize = variant({ prop: 'size', key: 'buttonSizes' }); export const buttonColor = variant({ prop: 'colors', key: 'buttonColors' });
Schaltflächenkomponente
export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, }
Ein Beispiel für die Verwendung einer mittelgroßen blauen Schaltfläche
<Button size="md" colors="blue" />
Eine detailliertere Beschreibung und Dokumentation des gestalteten Systems im
Büro. Github-SeiteUPD: Beim Schreiben eines Artikels hat das gestaltete System eine eigene Seite mit Dokumentation und Beispielen
https://styled-system.com/ erhalten .