This content originally appeared on DEV Community and was authored by Vânia Gomes
Vamos desenvolver um cabeçalho (header) com o logo do Ignite usando React. Existem várias maneiras de estilizar no React, mas vamos usar CSS. Criamos um arquivo styles.css na pasta src e colocamos um fundo escuro no body. Importamos esse CSS no app.jsx, e voilà, fundo escuro aplicado!
No React, não importamos CSS pelo HTML, mas sim pelos arquivos JavaScript. Isso porque queremos que o CSS seja específico para cada componente, evitando que um estilo afete outros componentes. Usamos CSS Modules para isso.
Passos para usar CSS Modules:
- Criar o Componente: Crie uma pasta components e um arquivo header.jsx:
`import React from 'react';
export function Header() {
return Ignite Feed;
}
`
- Criar o CSS Module: Crie um arquivo header.module.css:
.header { background-color: #333; height: 80px; } - Importar o CSS Module: Importe o CSS no componente: `import React from 'react'; import styles from './header.module.css';
export function Header() {
return (
Ignite Feed
);
}
`
- Usar o Componente no App: No app.jsx: `import React from 'react'; import { Header } from './components/Header';
function App() {
return (
);
}
export default App;
`
Explicação Divertida:
No React, CSS é tipo aquela roupa que só cabe em uma pessoa – a ideia é que cada componente tenha seu próprio "guarda-roupa" de estilos, sem misturar com os outros. Então, a gente usa CSS Modules para criar essas roupas exclusivas. Em vez de importar um CSS genérico, importamos um CSS especial só para aquele componente, garantindo que estilos não vazem para outros componentes.
Ao usar CSS Modules, importamos os estilos e aplicamos classes de forma dinâmica:
`import styles from './header.module.css';
Ignite Feed
`
O CSS Modules transforma suas classes em nomes únicos (parece mágica, mas é só um hash louco) para que não haja confusão entre estilos. Então, cada classe vira algo tipo .header_abc123, e assim garantimos que o estilo de um componente não bagunce os outros.
Agora, com essa mágica do CSS Modules, você pode estilizar seus componentes sem medo de causar um "apagão de estilo" nos vizinhos.
E pronto! Agora seu cabeçalho tá estilizado e sua aplicação tá chique, organizada, e sem conflitos de estilo!
This content originally appeared on DEV Community and was authored by Vânia Gomes
Vânia Gomes | Sciencx (2024-07-30T20:16:35+00:00) CSS Modules. Retrieved from https://www.scien.cx/2024/07/30/css-modules/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.