Styled Component - Reactjs (ES)
Tags: javascript, react, css
Published: 2021-07-21 02:50:17

### Documentación oficial
[Styled Components](https://styled-components.com/)

**Prerrequisitos**
1. Conocimientos básicos en Reactjs
2. Conocimientos en CSS

## Conceptos Básicos
**¿Qué es styled-components?**
Es una librería que nos permite estilizar nuestros componentes de React.

**¿Qué se puede hacer con styled-components?**
Se puede estilizar cualquier componente de react, aplicar animaciones, estilizado avanzado, paso de propiedades para condicionar estilos, agregar configuración de media queries para las distintas resoluciones y más.

### Contenido
1. Crear una aplicación de reactjs
2. Agregar la liberia styled-component
3. Crear un componente de vista para el ejemplo
4. Crear el StyledComponent
5. Agregar el StyledComponent al componente de vista
6. Estilicemos con styled-components
7. Conclusiones

**Empecemos**

#### 1. Crear una aplicación de reactjs
Documentación para crear una aplicación reactjs
[create-react-app](https://create-react-app.dev/docs/getting-started)

```
npx create-react-app example-styled-component-react 
```
#### 2. Agregar la libería styled-component
Una vez finalizada la creación del proyecto de react, procedemos a agregar la librería de styled-component por medio de la consola con el siguiente comando:

```
npm install --save styled-components
```

#### 3. Crear un componente de vista para el ejemplo
En este paso puedes hacer lo siguiente:
    a. Crear un nuevo componente para trabajar en una nueva vista
    b. Modificar directamente el AppComponent principal

En mi caso, prefiero crear un nuevo componente, y dejar el AppComponent solo para agregar configuraciones especiales que tendría nuestra aplicación (Importar el componente inicial que vería el usuario, configuración de ruteo, etc.).

![Creación de componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqka941wupvrblgoo7z3.PNG)

Agregamos el contenido de código básico para importarlo en el AppComponent

```
import React from "react";

const MainScreenComponent = (props) => {
  return <div>Hola Mundo!!!!</div>;
};

export default MainScreenComponent;
```

Quitamos el contenido interno en el div principal para agregar nuestro componente.

![Initial App Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wqsx2qk60nw6evkb5q.PNG)

![Imported MainComponent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv0fefvpeqyikazsgrjd.PNG)

![Hello World](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj7bi5p1ajbo26n3gu2t.PNG)

#### 4. Crear el StyledComponent
Vamos a agregar un nuevo archivo con la misma extensión de nuestro componente **(.jsx ó .js)**.

Lo nombraremos como **StyledMainScreenComponent.jsx**

![Created Styled Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptg8t02phnjii51w6oa9.PNG)

Agregaremos la configuración básica que tiene un styled-component, en este caso es configurando un div en donde está contenido normalmente el código HTML. Se importa el paquete correspondiente.

```
import styled from "styled-components";

export const StyledMainScreenComponent = styled.div``;
```

#### 5. Agregar el StyledComponent al componente de vista
Para agregar el StyledComponent a nuestro componente, lo hacemos por medio de un tag como que fuera una etiqueta HTML, se debe importar también a nuestro componente padre, en este caso **MainScreenComponent**.

```
import { StyledMainScreenComponent } from "./StyledMainScreenComponent";

const MainScreenComponent = (props) => {
  return <StyledMainScreenComponent>Hola Mundo!!!!</StyledMainScreenComponent>;
};
```
#### 6. Estilicemos con styled-components
Como primer paso, vamos a agregar una estilizacion de márgenes a nuestro componente y le pondremos la estilización de flexbox para que todos los componente se vayan alineando por fila dentro de un container principal.

```
export const StyledMainScreenComponent = styled.div`
  width: 90%;
  margin: auto;
  padding-top: 20px;

  .ContainerDefault {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 10px;
  }
`;
```
Cada uno de los elementos contenedores que declares deben estar interno en un className.

```
<StyledMainScreenComponent>
      <div className="ContainerDefault">Hola Mundo!!!!</div>
    </StyledMainScreenComponent>
```

![Applied Styled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc434jcxn7jfpm4itjco.PNG)

Ahora vamos a agregar estilos más personalizados para que estos se puedan integrar a cualquier componente en caso que se puedan reutilizar, ya que react se basa mucho en aprovechar los componentes para ser reutilizados.

Crearemos un styled para un título con el elemento label, uno para un botón de tipo cancel, y uno de tipo success.

Como lo hicimos inicialmente, se agregará un nuevo archivo de tipo **.jsx** y le agregaremos lo siguiente, en cada archivo:

![Common styled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y83qs4hmfdshtslisiz6.PNG)

TitleStyled.jsx
```
import styled from "styled-components";

export const TitleStyled = styled.label``;
```

CancelButtonStyled.jsx
```
import styled from "styled-components";

export const CancelButtonStyled = styled.button``;
```

SuccessStyled.jsx
```
import styled from "styled-components";

export const SuccessButtonStyled = styled.button``;
```
Con el TitleStyled, le agregaremos un font-size correspondiente a un título, un weight para ponerlo en negrita y un color por defecto.

```
export const TitleStyled = styled.label`
  font-size: 18pt;
  font-weight: 600;
  color: black;
  padding-top: 5px;
  padding-top: 5px;
`;
```
Lo importamos en nuestro componente padre con el que estemos trabajando y lo agregamos con su tag correspondiente.

```
<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled>Hola Mundo!!!!</TitleStyled>
      </div>
    </StyledMainScreenComponent>
```

Resultado:
![Applied Title Styled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxec9gjjbzbyiv60z4wp.PNG)

***¿Y si queremos otro color u otro tamaño de letra?***
Es aquí, en donde styled-component nos provee poder condicionar estilos a través de propiedades.

Vamos a mandarle la propiedad colorTitle y la fontSizeTitle desde el componente padre.

```
<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled colorTitle="#004e8c" fontSizeTitle="30pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#881798" fontSizeTitle="25pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#00ad56" fontSizeTitle="20pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#ffaa44" fontSizeTitle="16pt">
          Hola Mundo!!!!
        </TitleStyled>
      </div>
    </StyledMainScreenComponent>
```
En nuestro TitleStyled.jsx agregaremos lo siguiente:

```
export const TitleStyled = styled.label`
  font-size: ${(props) => (props.fontSizeTitle ? props.fontSizeTitle : "18pt")};
  font-weight: 600;
  color: ${(props) => (props.colorTitle ? props.colorTitle : 
"black")};
  padding-top: 5px;
  padding-top: 5px;
`;
```
Resultado:
![Props Title Styled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4dbvgyndn3k7cmwawln.PNG)

Ahora agregaremos los estilos para los botones cancel y success, por defecto un success es color verde y el cancel lo pondremos rojo, agregaremos en nuestros styled las siguientes líneas:

CancelButtonStyled
```
export const CancelButtonStyled = styled.button`
  background: #d13438;
  width: min-content;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 6px;
  font-size: 10pt;
  text-align: center;
  color: white;

  :hover {
    color: #c8c6c4;
    border: #750b1c 1px solid;
  }
`;
```

SuccessButtonStyled
```
export const SuccessButtonStyled = styled.button`
  background: #00ad56;
  width: min-content;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 6px;
  font-size: 10pt;
  text-align: center;
  color: white;

  :hover {
    color: #c8c6c4;
    border: #0b6a0b 1px solid;
  }
`;
```
Los importamos en nuestro componente padre:
```
<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled colorTitle="#004e8c" fontSizeTitle="30pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#881798" fontSizeTitle="25pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#00ad56" fontSizeTitle="20pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#ffaa44" fontSizeTitle="16pt">
          Hola Mundo!!!!
        </TitleStyled>
        <CancelButtonStyled>Cancel</CancelButtonStyled>
        <SuccessButtonStyled>Success</SuccessButtonStyled>
      </div>
    </StyledMainScreenComponent>
```
Resultado
![Finished result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hie5b4xvlukpusn7zj83.PNG)

#### 7. Conclusiones
1. Styled-component es más intuituvo para poder jerarquizar nuestros estilos en un componente.
2. Es fácil de aprender a usar.
3. Nos permite armar nuestros propios estilos para evitar el uso de múltiples librerías gráficas.
4. Practicas tus habilidades en CSS.