styled components
v6.1.13
¿Actualización de V5? Consulte la Guía de migración.
Utilizando los literales de plantilla etiquetados (una adición reciente a JavaScript) y el poder de CSS, styled-components le permiten escribir un código CSS real para peinar sus componentes. También elimina el mapeo entre componentes y estilos, ¡usar componentes como una construcción de estilo de bajo nivel no podría ser más fácil!
const Button = styled . button `
color: grey;
` ;Alternativamente, puede usar objetos de estilo. Esto permite una fácil portamiento de CSS de los estilos en línea, al tiempo que admite las capacidades de componentes de estilo más avanzados, como selectores de componentes y consultas de medios.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Equivalente a:
const Button = styled . button `
color: grey;
` ; styled-components es compatible con React (para Web) y React Native, lo que significa que es la elección perfecta incluso para aplicaciones verdaderamente universales! Vea la documentación sobre React Native para obtener más información.
Apoyado por el centro delantero. ¡Gracias por hacer esto posible!
¡Vea la documentación en Styled-Components.com/docs para obtener más información sobre el uso styled-components !
Aprovecha a algunas de las páginas más 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 >
) ;
}Esto es lo que verás en tu navegador:
La rama main es para la versión más corriente de componentes de estilo, actualmente V6. Para los cambios dirigidos a V5, apunte a su PRS a la rama legacy-v5 .
styled-componentsUn gran trabajo duro se destina a bibliotecas, proyectos y guías comunitarios. ¡Muchos de ellos hacen que sea más fácil comenzar o ayudarlo con su próximo proyecto! También hay muchas aplicaciones y sitios interesantes que las personas han construido usando componentes de estilo.
¡Asegúrate de ir a componentes de estilo increíble para verlos a todos! Y contribuya y agregue su propio trabajo a la lista para que otros puedan encontrarlo.
Si desea contribuir a styled-components consulte nuestras pautas de contribución y comunidad, lo ayudarán a configurarlo localmente y explicar todo el proceso.
Tenga en cuenta también que todos los repositorios bajo la organización styled-components siguen nuestro código de conducta, asegúrese de revisarlo y seguirlo.
Hágale saber a todos que 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 proyecto existe gracias a todas las personas que contribuyen. [Contribuir].
¡Gracias a todos nuestros patrocinadores! [Conviértete en un patrocinador]
Apoye este proyecto al convertirse en patrocinador. Su logotipo aparecerá aquí con un enlace a su sitio web. [Convertirse en patrocinador]
Licenciado bajo la licencia MIT, Copyright © 2016-Present Glen Maddern y Maximilian Stoiber.
Vea la licencia para más información.
Este proyecto se basa en una larga línea de trabajo anterior de personas inteligentes de todo el mundo. Nos gustaría agradecer a Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson y Andrey Sitnik, quienes contribuyeron con ideas, código o inspiración.
Un agradecimiento especial a @okonet por el fantástico logotipo.
