Como usar Styled Components no React

O que é Styled Components?

Styled Components é uma biblioteca (lib) que permite escrever código CSS dentro do JavaScript, também conhecido como CSS-in-JS, ganhando mais agilidade na criação de aplicações web e mobile.

Configurando projeto React JS

Primeiro, criaremos um projeto com React JS usando create-react-app. Execute esse comando no seu terminal, dentro da pasta de sua escolha.

npx create-react-app my-app

Após terminar o processo, teremos um projeto com uma estrutura de pastas parecida com essa:

Vamos apagar alguns arquivos que não precisamos mais, como: App.css, App.teste.js, index.css, logo.svg, serviceWorker.js e setupTests.js no final, o seu projeto terá uma estrutura parecida com essa:

Após apagar os arquivos, começaremos o projeto. No seu arquivo, App.js apague algumas linhas de código até ficar assim:

function  App() {
    return (
        <div>
            <h1>Hello world</h1>
	</div>
    );
}
export  default  App;	

Faça a mesma coisa no seu index.js, apague algumas linhas até ficar assim:

import  React  from  'react';
import  ReactDOM  from  'react-dom/client';
import  App  from  './App';

const  root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
	<App  />
    </React.StrictMode>
);

Depois disso podemos instalar o Styled Components, executando este comando no terminal do seu projeto.

npm install --save styled-components

Após terminar a instalação podemos abrir o projeto com o comando:

npm run dev

Que abrirá o projeto no seu navegador no endereço http://localhost:3000

Utilizando Styled Components exemplo

Para usar o styled components, vamos primeiro criar um arquivo styles.js na pasta src. Após criar o arquivo, adicione o seguinte código:

import  styled  from  'styled-components'

export  const  Title = styled.h1`
	color: #0000FF;
`

Esse código importa o styled-components e cria um componente com o nome Title, que sera usado para estilizar um título, como podemos ver na tag HTLM escrita depois de styled: styled.h1. Depois adicione o código CSS, que, nesse caso, só alteraremos a cor do título.

Vá para o App.js e importe o Title do arquivo styles, depois adicione como se fosse uma tag HTML.

import { Title } from  './styles'
 
function  App() {
    return (
        <div>
	    <Title>Hello world</Title>
	</div>
    );
}

export  default  App;

Salve o arquivo e volte para o navegador, e você perceberá que o texto mudou de cor para azul.

Veja o exemplo no CodeSandbox.

Conclusão

Depois de um pouco de prática usando styled-components, você verá que vai ficar mais fácil aproveitar código CSS nos seus projetos. Recomendo consultar a documentação oficial para aprender mais.