styled components
v6.1.13
Mise à niveau de la V5? Voir le guide de migration.
En utilisant des littéraux de modèle étiquetés (un ajout récent à JavaScript) et la puissance de CSS, styled-components vous permettent d'écrire du code CSS réel pour styliser vos composants. Il supprime également la cartographie entre les composants et les styles - l'utilisation de composants comme une construction de style de bas niveau ne pourrait pas être plus facile!
const Button = styled . button `
color: grey;
` ;Alternativement, vous pouvez utiliser des objets de style. Cela permet un portage facile de CSS à partir des styles en ligne, tout en prenant en charge les capacités des composants stylisés les plus avancés comme les sélecteurs de composants et les requêtes multimédias.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Équivalent à:
const Button = styled . button `
color: grey;
` ; styled-components est compatible avec React (pour le Web) et React Native - ce qui signifie que c'est le choix parfait, même pour les applications vraiment universelles! Voir la documentation sur React Native pour plus d'informations.
Soutenu par le centre frontal. Merci d'avoir rendu cela possible!
Voir la documentation sur Styled-Components.com/docs pour plus d'informations sur l'utilisation styled-components !
Quicklinks à certaines des pages les plus visitées:
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 >
) ;
}C'est ce que vous verrez dans votre navigateur:
La branche main est pour la version la plus courante des composants stylisés, actuellement V6. Pour les modifications ciblant la V5, veuillez pointer votre PRS à la branche legacy-v5 .
styled-componentsBeaucoup de travail acharné entre dans les bibliothèques communautaires, les projets et les guides. Beaucoup d'entre eux facilitent le démarrage ou vous aident avec votre prochain projet! Il existe également beaucoup d'applications et de sites intéressants que les gens ont construits à l'aide de composants stylisés.
Assurez-vous de vous diriger vers des composants de style impressionnants pour les voir tous! Et veuillez contribuer et ajouter votre propre travail à la liste afin que d'autres puissent le trouver.
Si vous souhaitez contribuer aux styled-components veuillez consulter nos directives de contribution et de communauté, ils vous aideront à vous installer localement et à expliquer l'ensemble du processus.
Veuillez également noter que tous les référentiels sous l'organisation styled-components suivent notre code de conduite, assurez-vous de le réviser et de le suivre.
Faites savoir à tout le monde que vous utilisez des composants stylisés →
[ ![ 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 ) Ce projet existe grâce à toutes les personnes qui contribuent. [Contribuer].
Merci à tous nos bailleurs de fonds! [Devenez un bailleur de fonds]
Soutenez ce projet en devenant un sponsor. Votre logo apparaîtra ici avec un lien vers votre site Web. [Devenir sponsor]
Licencié sous la licence MIT, Copyright © 2016-présent Glen Maddern et Maximilian Stoiber.
Voir la licence pour plus d'informations.
Ce projet s'appuie sur une longue lignée de travaux antérieurs par des gens intelligents du monde entier. Nous tenons à remercier Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson et Andrey Sitnik qui ont contribué des idées, du code ou de l'inspiration.
Un merci spécial à @okonet pour le logo fantastique.
