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 (
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>
); }