Escoped CSS

Escoped CSS

Se aplicado ao React, o Escoped CSS se dá quando utilizamos uma folha de estilo atrelado apenas a um componente, pois não queremos que aquele css afete outros componentes da nossa aplicação.

Para isso, utilizamos o CSS Modules, que nada mais são do que módulos css atrelados a um componente específico.

Exemplo de aplicação:

Dentro da pasta components criamos um componente chamado Header.jsx

Para criar um módulo css apenas para esse componente, criamos outro arquivo dentro da pasta components chamado Header.module.css

*Geralmente usamos apenas classes para estilizar os elementos dentro de um módulo css.

Importação do css module

Para importar esse arquivo css no componente a ser utilizado, devemos dar um nome a essa importação. Por exemplo:

import styles from ‘./Header.module.css’

onde styles passa a ser um objeto javaScript que vai armazenar as estilizações contidas no Header.module.css

Ou seja, para termos acesso as estilizações, devemos acessa-las como se fossem um objeto javaScript, por exemplo:

No arquivo Header.modules.css declaramos uma classe chamada .header:

.header { background: #333; color: #fff;}

Então, para acessa-la declaramos no className a variavel styles que é um objeto e logo após, a classe que quemos aplicar:

<header className={styles.header}>

<h1> Ignite </h1>

</header>

Se dermos uma olhada na variável styles através do console.log vamos ver que o css modules gerou um nome de classe aleatório para que essa classe não afete outros componentes da nossa aplicação que tenham o mesmo nome de classe.