Componentes con estilo

Los componentes con estilo son una de las nuevas formas de usar CSS en JavaScript moderno. Está destinado a ser un sucesor de los módulos CSS, una forma de escribir CSS que tiene como alcance un solo componente y no se filtra a ningún otro elemento de la página.

Una breve historia

Érase una vez, la Web era realmente simple y CSS ni siquiera existía. Diseñamos páginas usandomesasy marcos. Buenos tiempos.

EntoncesCSScobró vida, y después de un tiempo quedó claro que los frameworks podrían ayudar mucho, especialmente en la construcción de cuadrículas y diseños, Bootstrap y Foundation juegan un papel importante en esto.

Preprocesadores comoHABLAR CON DESCARO Ay otros ayudaron mucho a ralentizar la adopción de marcos y a organizar mejor el código, convenciones comoBEMySMACSScreció en uso, especialmente dentro de los equipos.

Las convenciones no son una solución para todo, y son complejas de recordar, por lo que en los últimos años con la creciente adopción deJavaScripty crear procesos en todos los proyectos frontend, CSS se abrió camino en JavaScript (CSS en JS).

Nuevas herramientas exploraron nuevas formas de hacer CSS-in-JS y algunas tuvieron éxito con una popularidad creciente:

Estilo de reacción
jsxstyle
Radio

y más.

Presentación de componentes con estilo

Una de las herramientas más populares esComponentes con estilo.

Está destinado a ser un sucesor deMódulos CSS, una forma de escribir CSS que se aplica a un solo componente y no se filtra a ningún otro elemento de la página.

(más sobre módulos CSSaquíyaquí)

Los componentes con estilo le permiten escribir CSS sin formato en sus componentes sin preocuparse por las colisiones de nombres de clases.

Instalación

Instale componentes con estilo usandonpmohilo:

npm install styled-components
yarn add styled-components

¡Eso es! Ahora todo lo que tienes que hacer es agregar esta importación:

import styled from 'styled-components'

Tu primer componente con estilo

Con elstyledobjeto importado, ahora puede comenzar a crear componentes con estilo. Aquí está el primero:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Buttonahora es unReaccionarComponente en toda su grandeza.

Lo creamos usando una función del objeto con estilo, llamadobuttonen este caso, y pasar algunas propiedades CSS en unplantilla literal.

Ahora este componente se puede renderizar en nuestro contenedor usando la sintaxis normal de React:

render(<Button />)

Los componentes con estilo ofrecen otras funciones que puede utilizar para crear otros componentes, no solobutton, me gustasection,h1,inputy muchos otros.

La sintaxis utilizada, con la comilla invertida, puede ser extraña al principio, pero se llamaPlantillas etiquetadas, es JavaScript simple y es una forma de pasar un argumento a la función.

Usar accesorios para personalizar componentes

Cuando pasa algunos accesorios a un componente con estilo, los pasará alDOMnodo montado.

Por ejemplo, así es como pasamos elplaceholderytypeapoyos a uninputcomponente:

const Input = styled.input`
  //...
`
render(
<div>
<Input placeholder="…" type=“text” />
</div>
)

Esto hará lo que pienses, insertando esos accesorios como atributos HTML.

Apoyos en lugar de pasar a ciegas a laDOMtambién se puede utilizar para personalizar un componente según el valor de la propiedad. He aquí un ejemplo:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`
render(
<div>
<Button>A normal button</Button>
<Button>A normal button</Button>
<Button primary>The primary button</Button>
</div>
)

Establecer elprimaryprop cambia el color del botón.

Ampliación de un componente con estilo existente

Si tiene un componente y desea crear uno similar, con un estilo ligeramente diferente, puede usarextend:

const Button = styled.button`
  color: black;
  //...
`
const WhiteButton = Button.extend </span><span style="color:#e6db74">  color: white; </span><span style="color:#e6db74">
render(
<div>
<Button>A black button, like all buttons</Button>
<WhiteButton>A white button</WhiteButton>
</div>
)

Es CSS regular

En Styled Components, puede usar el CSS que ya conoce y ama. Es CSS simple. No es pseudo CSS ni CSS en línea con sus limitaciones.

Puede utilizar consultas de medios,anidandoy cualquier otra cosa que pueda necesitar.

A continuación, se muestra un ejemplo de una consulta de medios:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

Uso de prefijos de proveedor

Los componentes con estilo agregan automáticamente todos los prefijos de proveedor necesarios, por lo que no necesita preocuparse por este problema.

Conclusión

¡Eso es todo para esta introducción de Styled Components! Estos conceptos lo ayudarán a comprender el concepto y lo ayudarán a comenzar a usar esta forma de usar CSS en JavaScript.

Descarga mi gratisReact Handbook