styled components
v6.1.13
Atualizando de V5? Veja o Guia de Migração.
Utilizando literais de modelo marcado (uma adição recente ao JavaScript) e o poder do CSS, styled-components permitem que você escreva código CSS real para estilizar seus componentes. Ele também remove o mapeamento entre componentes e estilos-usar componentes como um construto de estilo de baixo nível não pode ser mais fácil!
const Button = styled . button `
color: grey;
` ;Como alternativa, você pode usar objetos de estilo. Isso permite a fácil porte de CSS a partir de estilos embutidos, enquanto ainda suporta recursos de componentes de estilo mais avançados, como seletores de componentes e consultas de mídia.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Equivalente a:
const Button = styled . button `
color: grey;
` ; styled-components são compatíveis com o React (para Web) e o React Native-o que significa que é a escolha perfeita, mesmo para aplicativos verdadeiramente universais! Consulte a documentação sobre o React Native para obter mais informações.
Suportado pelo Centro Front -End. Obrigado por tornar isso possível!
Consulte a documentação em styled-components.com/docs para obter mais informações sobre o uso styled-components !
Quicklinks para algumas das páginas mais visitadas:
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 >
) ;
}É isso que você verá em seu navegador:
A filial main é para a versão mais aparente dos componentes de estilo, atualmente V6. Para alterações direcionadas à V5, aponte seu PRS na filial legacy-v5 .
styled-componentsMuito trabalho árdua entra em bibliotecas, projetos e guias comunitários. Muitos deles facilitam o início ou ajudá -lo com seu próximo projeto! Há também muitos aplicativos e sites interessantes que as pessoas construíram usando componentes de estilo.
Certifique-se de ir a componentes impressionantes para vê-los todos! E por favor, contribua e adicione seu próprio trabalho à lista para que outras pessoas possam encontrá -la.
Se você deseja contribuir com styled-components , consulte nossas diretrizes contribuintes e da comunidade, eles o ajudarão a se instalar localmente e explicar todo o processo.
Observe também que todos os repositórios sob a organização styled-components seguem nosso código de conduta, certifique-se de revisá-lo e segui-lo.
Deixe todos saber que você está usando componentes de estilo →
[ ![ 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 ) Este projeto existe graças a todas as pessoas que contribuem. [Contribuir].
Obrigado a todos os nossos apoiadores! [Torne -se um patrocinador]
Apoie este projeto, tornando -se um patrocinador. Seu logotipo aparecerá aqui com um link para o seu site. [Torne -se um patrocinador]
Licenciado sob a licença do MIT, Copyright © 2016-presente Glen Maddern e Maximilian Stoiber.
Consulte a licença para obter mais informações.
Este projeto se baseia em uma longa fila de trabalhos anteriores de pessoas inteligentes em todo o mundo. Gostaríamos de agradecer a Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson e Andrey Sitnik, que contribuíram com idéias, código ou inspiração.
Agradecimentos especiais a @okonet pelo logotipo fantástico.
