Aluizio Developer

03 de maio de 2020 • 2 min de leitura

Personalizando um tema com Styled Components no React

Neste post estarei mostrando um exemplo de como criar um tema para sua aplicação React usando a biblioteca Styled Components.

Aluizio Developer

O recurso demonstrado permitirá a criação de mais de um tema para uma aplicação React, como por exemplo um tema light e um tema dark. E o melhor, a alternância entre os temas acontece de forma dinâmica, sem refresh de tela. O Styled Components possui um provider que permite fazer essas mudanças em tempo real.

Para rodar o exemplo abaixo você deve ter instalado em sua máquina o NodeJS e o React (CLI) para criação de um novo projeto.

Vamos lá!

Execute os comandos abaixo para criação de uma aplicação React. Repare que o 4º comando é a chamada para o editor de código Visual Studio Code, para que já seja carregado com a pasta do novo projeto.

npm init react-app react-with-styled-components

cd react-with-styled-components

npm install styled-components --save

code .

Arquivo App.js:

Os comentários no código são exclusivamente para orientar aqueles que estão dando os primeiros passos com React. Como sugestão, acesse e explore a documentação oficial do React.

import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import Header from './Header';

// Definicao do tema light
const lightTheme = {
	background: "#f0f0f0";
};

// Definicao do tema dark
const darkTheme = {
	background: "#444444";
};

function App() {
	
	// constante que define o tema padrão e recebe as mudanças feitas pelo usuário durante o uso
	const [theme, setTheme] = useState(lightTheme);

	// constante que verifica qual é o tema atual para mudar para outro, quando há uma solicitação de mudança
	const [isDark, setIsDark] = useState(false);

	// método que efetua a mudança de tema (alternância)
	const changeTheme = () => {
		setIsDark(!isDark);
		setTheme(isDark ? darkTheme : lightTheme);
	};

	return (
		<>
			// Note que quando theme sofre mudança todos os filhos do nó ThemeProvider também são afetados.
			// Sendo assim, o component Header receberá as mudanças que ocorrerem no ThemeProvider
			<ThemeProvider theme={theme}>
				<Header>
					<h1>Aluizio Developer</h1>
				</Header>
				<button type="button" onClick={changeTheme}>Alterar Tema</button>
			</ThemeProvider>
		</>
	);
}

Arquivo Header.js:

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

const Header = styled.header`
	width: 100%;
	height: 70px;
	background: ${props => props.theme.background}
`;

export default Header;

Para executar o servidor local:

npm start

O exemplo é bem simples mas o bastante para demonstrar o que é possível desenvolver utilizando Styled Component com React, creio eu. A partir desse ponto, o que temos a fazer é uma boa estruturação dos compontents lançando mão do uso Styled Component.

Para mais detalhes sobre criação de temas com Styled Components, acesse o link da documentação oficial: Theming.

Links úteis:

React

Styled Components

Comentários