Entendendo o que é Styled-Component no React!

No decorrer do desenvolvimento de seu aplicativo, será necessário inserir estilos e cores, o deixar mais agradável para seu uso e do público. Com base nisso, podemos usar meios de estilização como StyleSheet, ou baixar e inserir o Styled-Component em seu projeto. Vejamos qual a vantagem do Style-Component e porquê ele é tão utilizado na criação de projetos profissionais.

O styled-components é uma biblioteca para estilização de componentes em React que permite escrever CSS de uma forma mais legível e com menos complexidade. Em vez de escrever estilos separados em um arquivo CSS externo e importá-los para o componente React, o styled-components permite escrever estilos diretamente no arquivo do componente, criando uma experiência de desenvolvimento mais fluída.

Mas para utilizar essa poderosa ferramenta, precisamos instalá-la via pacote NPM:

npm install styled-components

Uma de suas vantagens é utilizar a estrutura conhecida da web, assim os desenvolvedores que utilizarem essa biblioteca terão muito mais facilidade em estilizar seu sistema.

Vejamos um exemplo dessa biblioteca em açã na criação de um Botão:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
`;

function MyButton() {
  return (
    <Button>
      Clique Aqui
    </Button>
  );
}

export default MyButton;

No exemplo acima, nós conseguimos ver a sintaxe do Styled-Component. Primeior é feito um import do React e styled da biblioteca instalada anteriormente.

Logo após criamos uma Const que damos o nome de Button que recebe styled.button que é um tipo de estilização para botões. Feito issso nós comoeçamos a passar os parâmetros dentro de crases, como se fosse uma estilização de CSS. Logo após criamos uma função que retorna um simples botão.

Uma das diferenças existentes do StyleSheet e Styled-Component é que no StyleSheet sua forma de escrita é feita em CamelCase(primeiras palavras maiúsculas, exemplo: let androidAndIos).

Concluímos assim que o Styled-Component é uma grandiosa ferramenta de estilização, principalmente pela sua capacidade de exportar essas configuações para outros arquivos e também puxar configuações feitas por exemplo dentro de um tema específico, podendo padronizar cores para seu aplicativo.