Styled Components - 7 truques para trabalhar com eles

const theme = {
  color: {
    gray: {
      100: '#f6f9fc',
      200: '#e9ecef',
      300: '#dee2e6',
      400: '#ced4da',
      500: '#adb5bd',
      600: '#8898aa',
      700: '#525f7f',
      800: '#32325d',
      900: '#212529',
    },
  },
  font: {
    body: 'Open Sans, sans-serif',
  },
  fontSize: {
    h3: {
      fontSize: '2.25rem',
      lineHeight: '2.25rem',
    }
    },
    dimension: {
      maxWidth: '1200px',
    },
    zIndex: {
      stepProgress: '100',
      bottomBar: '550',
      backdrop: '990',
      modal: '1000'
    }
  },

  export default theme;

```


Podemos escrever o seguinte:



````javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import theme from "config/theme";
import { ThemeProvider } from "styled-components";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

```
{% endraw %}


Para que qualquer componente estilizado que usarmos no componente {% raw %}`App`{% endraw %} possa acessar as variáveis definidas no {% raw %}`theme.js`{% endraw %} acessando a propriedade {% raw %}`theme`{% endraw %} da variável {% raw %}`props`{% endraw %}:
{% raw %}


````javascript
import styled from 'styled-components';

export default styled.div`
  font-family: ${props => props.theme.font.body};
  color: ${props => props.color || props.theme.body}
`;

```



**2º) Alterar um tipo de componente estilizado** - 

Esse é o truque típico que parece bobo até um dia por algum motivo que você precise. Basicamente, o que ele nos permite é modificar o rótulo que renderizará um componente estilizado sem adicionar código extra ao nosso aplicativo.
Suponha que temos o seguinte componente estilizado definido:



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

export default styled.div`
  font-family: ${(props) => props.theme.font.body};
  font-size: ${(props) => (props.large ? "1.5rem" : "1rem")};
  line-height: ${(props) => (props.large ? "145%" : "110%")};
  color: ${(props) => props.color || props.theme.body};
  margin-bottom: ${(props) => props.marginBottom || "0"};
`;

```
{% endraw %}


Quando o usarmos em nosso aplicativo, o que veremos na DOM será uma tag {% raw %}`div`{% endraw %}, pois a estamos definindo como {% raw %}`styled.div`{% endraw %}. No entanto, é possível modificar esse rótulo usando o atributo {% raw %}`as`{% endraw %} em nosso componente estilizado, por exemplo:
{% raw %}


````javascript
import 'TextWrapper' from 'styled/TextWrapper';

export default ({text}) => (
  <TextWrapper as="p">
    {text}
  </TextWrapper>
);

```



Nesse caso, o que obteríamos na DOM seria o texto contido dentro de uma tag `<p>`.

**3º) Elementos de referência dentro do componente estilizado** - 

Claro, com os componentes estilizados podemos fazer referência a outros elementos da DOM usando uma sintaxe semelhante à que estamos acostumados em CSS ou Sass. Por exemplo, se quisermos definir um `div` cujos filhos tenham 50% de largura, podemos escrever o seguinte:



````javascript
import styled from 'styled-components';

export default styled.div`
  display: flex;

  & > div {
    flex-grow: 0 0 50%;
    max-width: 50%;
  }

  `;
```
{% endraw %}


Isso também nos ajuda a usar os pseudo seletores {% raw %}`::before`{% endraw %} e {% raw %}`::after`{% endraw %} :
{% raw %}


````javascript
import styled from 'styled-components';

export default styled.div`
  display: flex;
  position: relative;

  & > div {
    flex-grow: 0 0 50%;
    max-width: 50%;
  }

  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0, 0, 0, 0.5);
  }
`;
```



Portanto, além do fato de que os Styled Components suponham uma nova forma de pensar a respeito da organização de nossa aplicação, não será necessário que aprendamos uma sintaxe especial para trabalhar com eles, pois nosso conhecimento de CSS nos ajudará.

**4º) Referencie outros componentes estilizados**

Outro truque muito útil ao qual podemos recorrer quando precisamos, é aquele que nos permite fazer referência a um componente estilizado dentro de outro. Por exemplo, um caso de uso típico para esse truque é ter um botão composto de texto e ícone que deve mudar durante um foco. Podemos conseguir isso da seguinte maneira:



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

const Button = styled.button`
  background: blue;
  color: white;

  &:hover {
    background: gray;
    color: black;
  }
`;

const Icon = styled.i`
  color: white;
  font-size: 1.5em;

  ${Button}:hover & {
    color: black;
  }
`;

```
{% endraw %}


Como você pode ver, dentro do ícone do componente estilizado, estamos nos referindo ao componente Botão usando a sintaxe {% raw %}`$ {Botão}`{% endraw %}. Isso é possível porque os Styled Components atribuem classes específicas a cada componente criado por meio da expressão estilizada. então, mais tarde, podemos usá-los para referenciá-los. Claro, isso só funcionará se fizermos referência a um componente estilizado, não se o usarmos para fazer referência a qualquer outro tipo de componente. 

**5º) Estenda componentes estilizados** - Outro truque muito útil para não sobrecarregar excessivamente seus componentes estilizados é poder estender os componentes estilizados que definimos, para que, por exemplo, definamos o seguinte:
{% raw %}


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

const DefaultA = styled.button`
  color: ${(props) => props.theme.colors.primary};
`;
```



Posteriormente, podemos fazer o seguinte:



````javascript
import styled from "styled-components";
import DefaultA from "styled/DefaultA";

const CustomA = styled(DefaultA)`
  font-size: 1.5rem;
`;
```
{% endraw %}


Portanto, o que obteremos quando usarmos {% raw %}`<CustomA>`{% endraw %} será um componente com a {% raw %}`color`{% endraw %} de estilos (vindo do componente {% raw %}`DefaultA`{% endraw %}) e o {% raw %}`font-size`{% endraw %} (vindo do próprio {% raw %}`<CustomA>`{% endraw %}).

Claro, também podemos substituir estilos:
{% raw %}


````javascript
import styled from "styled-components";
import DefaultA from "styled/DefaultA";

const RedA = styled(DefaultA)`
  font-size: 2rem;
  color: red;
`;
```



**6º) Definir propriedades dinâmicas** 
Outra coisa que nos permite fazer componentes estilizados é tirar proveito do poder dos `tagged templates` para definir propriedades CSS dinamicamente. Por exemplo, podemos definir um botão que é pintado de forma diferente dependendo do valor da propriedade `type` que ele recebe:



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

export default styled.button`
  background: ${(props) => {
    switch (props.type) {
      case "blue":
        return props.theme.color.blue;
      case "lightGray":
        return props.theme.color.gray200;
      default:
        return props.theme.color.primary;
    }
  }};
  width: ${(props) => props.width || "auto"};
  height: ${(props) => props.height || "auto"};
  border: none;
  -webkit-appearance: none;
  padding: ${(props) =>
    props.width && props.height ? "25%" : "1rem 1.375rem"};
  border-radius: 0.5rem;
  text-align: ${(props) => props.align || "left"};
  outline: 0;
  color: ${props => {
    switch (props.type) {
      case 'blue':
        return 'white';
      case 'lightGray':
        return props.theme.color.body;
      default:
        return 'white';
    }
  }};
  font-family: ${props => props.theme.font.title};
  font-size: ${props => props.fontSize || '1.375rem'};
`;
```
{% endraw %}

O que é muito útil para encapsular os elementos de nossa IU modificando apenas alguns aspectos deles.

**7º) Atributos de passagem** 

Finalmente, é importante lembrar que também é possível passar atributos para nossos componentes estilizados usando {% raw %}`attrs`{% endraw %} ao defini-los. Por exemplo, se tivermos integrado o Bootstrap em nosso aplicativo, podemos definir um botão com a propriedade {% raw %}`type`{% endraw %} (como fizemos no exemplo anterior), mas desta vez pintar a classe apropriada com base no valor dessa propriedade:
{% raw %}


````javascript
const Button = styled.button.attrs({
  className: `btn btn-${(props) => props.type || "primary"}`,
})``;

<Button type="primary" />;
```



Como você pode ver, os componentes estilizados nos fornecem uma forma diferente de trabalhar com os estilos de nossa aplicação, favorecendo tanto sua “componentização” quanto seu reaproveitamento. Para aprofundá-los, recomendo dois artigos bastante interessantes onde são expostas algumas maneiras recomendadas de integrá-los em nossa aplicação que foi também onde utilizei como fonte de pesquisa:

- https://www.elpassion.com/blog/styled-components-nitty-gritty-2d74b8690ef8
- https://itnext.io/thinking-in-styled-components-e230ea37c52c
- https://styled-components.com/docs