O professor ensinou a usar o Material UI mas não ensinou como adicionar classes css dinamicamente á um elemento com react
O professor ensinou a usar o Material UI mas não ensinou como adicionar classes css dinamicamente á um elemento com react
Olá, Albert! Tudo bem?
A adição de classes dinamicamente no React é muito atrelada ao JavaScript puro. Outros frameworks, por não usarem JSX, acabam tendo uma sintaxe mais específica.
Entretanto, no React, apenas precisamos retornar a string que desejamos no campo className
. É uma variável? Podemos passar a variável. São duas opções que dependem de uma condição? Podemos usar o if
ternário.
<h1 className={variavel}>Olá, mundo!</h1>
<h2 className={ativo ? 'ativo' : 'inativo'}>Como vai?</h2>
No exemplo acima, temos dois casos:
h1
estamos passando uma variável que contém um valor string que é o nome da nossa classe.h2
estamos passando a classe ativo
se a variável ativo
for verdadeira, e inativo
se for falsa.É assim que podemos fazer com React. Não se esqueça também que a lógica é código JavaScript, então precisa ser encapsulado em {}
para que o JSX reconheça corretamente.
Espero ter ajudado!
E se precisarmos adicionar uma classe, sem remover as classes antigas?
Albert, você pode fazer isso usando a concatenação de strings. Abaixo um exemplo da própria documentação do React (levemente modificado para seguir o padrão funcional):
export default function Exemplo(props) {
let className = 'menu'; // esse é o valor inicial, a classe "menu" já vem presente
// aqui fazemos uma verificação, se recebermos uma prop com isActive sendo true, adicionamos a classe "menu-active"
if (props.isActive) {
className += ' menu-active'; // perceba o espaço antes do nome da classe, o valor de className será "menu menu-active"
}
return <span className={className}>Menu</span>
}
E você pode usar a criatividade para encontrar a melhor solução para isso, você pode, por exemplo, definir as classes diretamente e adicionar valores:
return <span className={`menu menu-nav ` + (isActive ? 'menu-active' : '')}>Menu</span>
No fim, className
(a propriedade do elemento HTML) precisa receber uma string, a string pode conter uma classe, ou várias classes. Contanto que você siga isso, poderá manipular os valores da forma que preferir!
Espero que ajude!