1

Galera estou usando React e estou criando alguns componentes, sou bem iniciante em react, estou estilizar os componentes em um arquivo css externo e importando, porém preciso fazer uma side bar q precisa abrir e fechar ao ser clicado em um botão, percebi que isso vai dar muita merda, existe uma maneira ideal no react de estilizar e mudar o estilo quando houver um click de um botão?

0

2 Respostas 2

2

Aqui comento sobre três maneiras de definir o estilo.

(1) Maneira tradicional

Criar um arquivo individual para a folha de estilos que será usada por todo o app.

Problema: pode ser que nem todos os estilos sejam usados pelo app ou em caso de você fazer um componente reutilizável, outro consumidor do seu componente vai depender de os estilos específicos pro seu app

(2) CSS inline com style

Definir o estilo de cada componente inline usando a prop style

Problema: Deixa estilo acoplado com a estrutura e implementação dos elementos. Pode ser menos eficiente que CSS definido externamente. Deve ser só usado no caso de CSS externo não resolver o problema em mente.

(3) Arquivos de CSS separados para cada componente (minha recomendação)

Definir um arquivo de CSS para cada componente

Recomendo essa maneira porque:

(a) separa o estilo da estutura e implementação

(b) normalmente mais eficiente que inline

(c) arquivos são separados mas podem ser combinados em um só usando um bundler como o Webpack

(d) lhe permite redistribuir um componente reutilizável sem ter que incluir uma folha de estilos com regras que não tem nada haver com o componente em questão.

Exemplo

Button.js

import 'Button.css';

const Button = (props) => (
  <button type="button" className="btn">{props.children}</button>
);

Button.css

.btn {
  padding: 20px 30px;
}

/* mais outros estilos relacionado somente à esse componente */

O estilo é importado no próprio componente. Bundlers como o Webpack lhe permite fazer isso. Há um plugin que extrai o CSS de dentro do arquivo JS também.

1

Cara, não tem segredo, você vai ter um state para controlar a ação do clique, com o clique executando a mudança de state o componente vai ser reendenizado, ou seja, vai passar de novo pelo metódo render... Daí é só fazer um condicional no className do elemento em que você quer alterar com CSS.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .