styled components
v6.1.13
Upgrade von V5? Siehe den Migrationshandbuch.
Mit markierten Vorlagen-Literalen (eine aktuelle Ergänzung zu JavaScript) und die Kraft von CSS können Sie styled-components den tatsächlichen CSS-Code schreiben, um Ihre Komponenten zu stylen. Es entfernt auch die Zuordnung zwischen Komponenten und Stilen-die Verwendung von Komponenten als Konstrukt auf niedrigem Ebene könnte nicht einfacher sein!
const Button = styled . button `
color: grey;
` ;Alternativ können Sie Stilobjekte verwenden. Dies ermöglicht eine einfache Portierung von CSS aus Inline-Stilen und unterstützt gleichzeitig die fortschrittlicheren Funktionen für die Komponenten wie Komponentenauswahl und Medienabfragen.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Äquivalent zu:
const Button = styled . button `
color: grey;
` ; styled-components sind sowohl mit React (für Web) als auch mit React Native kompatibel-was bedeutet, dass es auch für wirklich universelle Apps die perfekte Wahl ist! Weitere Informationen finden Sie in der Dokumentation über React Native.
Unterstützt von vorderster Ende. Vielen Dank, dass Sie dies möglich gemacht haben!
Weitere Informationen zur Verwendung styled-components finden Sie in der Dokumentation unter styled-components.com/docs !
QuickLinks zu einigen der meistbesuchten Seiten:
import React from 'react' ;
import styled from 'styled-components' ;
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled . h1 `
font-size: 1.5em;
text-align: center;
color: palevioletred;
` ;
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled . section `
padding: 4em;
background: papayawhip;
` ;
function MyUI ( ) {
return (
// Use them like any other React component – except they're styled!
< Wrapper >
< Title > Hello World, this is my first styled component! < / Title >
< / Wrapper >
) ;
}Dies ist es, was Sie in Ihrem Browser sehen werden:
Der main ist für die aktuellste Version von gestylerischen Komponenten, derzeit V6. Für Änderungen, die sich an V5 abzielen, richten Sie bitte Ihre PRs auf den legacy-v5 Zweig.
styled-componentsViele harte Arbeit gehen in Community -Bibliotheken, Projekte und Führer ein. Viele von ihnen machen es einfacher, loszulegen oder Ihnen bei Ihrem nächsten Projekt zu helfen! Es gibt auch viele interessante Apps und Websites, die Menschen mit gestylerischen Komponenten aufgebaut haben.
Gehen Sie unbedingt zu fantastischen Komponenten, um sie alle zu sehen! Und bitte beitragen und fügen Sie Ihre eigene Arbeit zur Liste hinzu, damit andere sie finden können.
Wenn Sie zu styled-components beitragen möchten, sehen Sie bitte unsere beitragenden und Community-Richtlinien, sie helfen Ihnen dabei, sich lokal einzurichten und den gesamten Prozess zu erklären.
Bitte beachten Sie auch, dass alle Repositorys unter der Organisation styled-components unserem Verhaltenskodex folgen, sicherstellen, dass Sie sie überprüfen und befolgen.
Lassen Sie alle wissen, dass Sie gestylerte Komponenten verwenden →
[ ![ style: styled-components ] ( https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e )] ( https://github.com/styled-components/styled-components ) Dieses Projekt besteht dank aller Menschen, die einen Beitrag leisten. [Beitragen].
Vielen Dank an alle unsere Unterstützer! [Backer werden]
Unterstützen Sie dieses Projekt, indem Sie Sponsor werden. Ihr Logo wird hier mit einem Link zu Ihrer Website angezeigt. [Sponsor werden]
Lizenziert unter der MIT-Lizenz, Copyright © 2016-Present Glen Maddern und Maximilian Stoiber.
Weitere Informationen finden Sie unter Lizenz.
Dieses Projekt baut auf einer langen Reihe früherer Arbeiten von klugen Leuten auf der ganzen Welt auf. Wir möchten Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik danken, der Ideen, Code oder Inspiration beigetragen hat.
Besonderer Dank geht an @okonet für das fantastische Logo.
