Adicionando CSS - Mllara/react-project GitHub Wiki

-O CSS pode ser adicionado de forma global na aplicação, por meio do arquivo index.css por exemplo;

-Porém é possível estilizar a nível de componentes;

-Utilizamos o CSS modules para isso;

-Basta criar um arquivo como: Componente.module.css;

-E chamar este CSS no componente;

O CSS module cria um css específico. enquanto o index.css da pasta é global (geral para a aplicação)

************Na prática

  • Abrir arquivo nome da pasta.module.css No caso: Frase.module.css Nesta pasta vamos estilizar a pasta Frase, por ex:

.fraseContainer{ //não pode conter -, pois no jsx não lê Ou CamelCase ou _ background-color: #333; border: 1px solid #111; }

  • Após criada, na pasta Frase.js vamos importar:

import styles from './Frase.module.css' // é padrão ser styles. Ele é igual a props. Ele é um objeto que condensou tudo em propriedades

import styles from './Frase.module.css'

function Frase () { return (

// className vai determinar a class em componente em react. e {styles.fraseContainer} = tem um objeto styles que herdou todas as classes com propriedades

Esta é um componente com uma frase

) }

export default Frase* *

  • E na pasta App.js: precisa importar a pasta Frase e colocar no return:

import HelloWord from './Components/HelloWorld';

import './App.css';

import SayMyName from './Components/SayMyName';

import Pessoa from './Components/Pessoa'

import Frase from './Components/Frase'

function App() {

const nome = 'Maria'

return (

<div className="App">

  <h1>Testando</h1>

    <Frase/>

    <Frase/>

    <SayMyName nome="Márcia"/>

    <SayMyName nome={nome} />

    <Pessoa nome="Rodrigo"  idade="28" profissão="Programador" foto="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bbc.com%2Fportuguese%2Fgeral-37268918&psig=AOvVaw2CQr6qc9PstUIzRPPZ9DjE&ust=1678563688863000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCPDropeP0v0CFQAAAAAdAAAAABAE" />

</div>

); }

⚠️ **GitHub.com Fallback** ⚠️