Hoy vamos a hablar de styledcomponents, una biblioteca que nos permite estilizar nuestros componentes de React y nos gusta tanto porque nos crea un componente, y al mismo tiempo que definimos sus estilos, podemos también condicionarlos a las propiedades que queramos.

Con styled Components tenemos una forma más sofisticada de crear estilos en nuestras aplicaciones hechas con react.
Asi que primero para usar styled components debemos instalar el módulo correspondiente.

En la consola de tu proyecto dentro de tu editor de texto:

npm i styled-components

Con styled components la idea es que, en vez de asignar estilos css, creemos un componente y que sea este mismo el que tiene los estilos.

Vamos a crear un archivo con el nombre Styled.js y dentro vamos a pegar el siguiente código:

import styled from 'styled-components';

export const Cuadrado = styled.div`
    width: 70px;
    height: 70px;
    background-color: #000;
`;

Lo que hace este código es importar el módulo para poder utilizarlo, entonces a partir de ahora podemos crear los componentes.
Y en este caso estamos creando el componente Cuadrado, este será un div que tiene un ancho y alto de 70px y es de color negro.

Pero para poder usarlo debemos importarlo. Entonces nos vamos al lugar donde lo queremos importar y lo hacemos de la siguiente manera:

import {Cuadrado} from './Styled';

Y ahora podemos usar este cuadrado:

...
Return(
   <div>
        <div>
               <Cuadrado />
        </div>
   </div>
)
...

Lo que acabamos de hacer es algo básico, pero hay mucho más.

Por ejemplo, si queremos hacer hover podemos hacerlo de forma muy sencilla y muy similar a como se hace en Sass:

export const Cuadrado = styled.div`
    width: 70px;
    height: 70px;
    background-color: #000;

&:hover{
     background-color: #f58;
 }

`;

Herencia
Podemos también tener herencia, lo que significa que el siguiente rectángulo va a recibir todos los estilos del cuadrado y además tendrá sus propios estilos:

export const Rectangulo = styled(Cuadrado)`
   width: 200px;
`;

El rectángulo será del mismo color y alto, pero reescribe el valor del ancho.

Lo importamos y usamos de la misma forma:

import {Cuadrado, Rectangulo} from './Styled';

Return(
  <div>
   <div>
      <Cuadrado />
      <Rectangulo/>
    </div>
 </div>
)


En Styled Components también tenemos la posibilidad de meter JavaScript como en el siguiente componente:

export const Component = styled.div`
  background-color: ${({isRight}) => isRight ? 'green' : 'red'};
`;

Este componente, lo que hace es que le podemos pasar una prop (en este caso es isRight) y usamos el operado ternario para definir el estilo, (si es verdadero entonces el fondo será verde, en caso contrario, será rojo)

Lo importamos como ya hemos visto y lo usamos de la siguiente forma:

Return(
  <div>
   <div>
      <Cuadrado />
      <Rectangulo/>
              <Component isRight={true}>Hola styled Components</Component>
    </div>
 </div>
)

En este caso, como le pasamos el valor true a la prop, se pintará verde.

Etiquetas de HTML

En realidad Styled Component permite no solo modificar estilos, sino también propiedades de HTML, veamos el siguiente ejemplo:

export const Input = styled.input.attrs(props => ({
       type: "password",
       maxLength: props.myMaxLength || 5,
      }))`
          color: blue;
       `;

Lo que ocurre con este input es que en lugar de modificar sus estilos, estamos modificando sus atributos utilizando props. Lo que le estamos diciendo es que si el componente Input tiene la prop myMaxLenght entonces que permita escribir la cantidad de caracteres que estén definidos en esta, pero en caso de que no cuente con esta prop, solo permita ingresar 5 carácteres.

MEDIA QUERIES
Si queremos hacer nuestro proyecto responsive podemos hacer lo siguiente:

const desktopStartWidth = 996;

const desktop = `@media (min-width: ${desktopStartWith}px)`;
const mobile = `@media (max-width: ${desktopStartWith}px)`;

Primer guardamos el valor de la pantalla Desktop en una constante y en las otras dos variables le decimos que si la pantalla tiene un tamaño mayor a ese, entonces estamos en Desktop. Y si es más menor, entonces estamos en mobile.

Entonces podemos usar las media queries en todos nuestros elementos con estos valores:

export const Cuadrado = styled.div`
       width: 70px;
       height: 70px;
       background-color: #000;

       ${mobile}{
                width: 100%;
        }
`;

Maquetar el body
A veces también queremos darle estilos que estén asociados al body de la página y no a un elemento en específico.
Para poder hacerlo, primero debemos importar el módulo createGLobalStyle. Una vez importado podemos usarlo para crear los estilos del body:

import {createGlobalStyle} from 'styled-component';

export const GlobalStyle = cresteGlobalStyle`
   body{
       background-color: #333;
    }
`;


Una vez definido este globalStyle, lo que hay que hacer es usarlo. Para eso lo importamos en index.js aunque podría ser importado en alguna otra parte del proyecto:

...
   ReactDOM.render(
          <div>
              <GlobalStyle />
              <App />
          </div>

);

¿Qué te pareció este artículo?, ¿ya sabias algo de Styled Components?

Comenta tu experiencia. Te leo 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here