Estilizando o React usando CSS
Existem muitas maneiras de estilizar o React com CSS, este tutorial examinará mais de perto três maneiras comuns:
- Estilo embutido
- Folhas de estilo CSS
- Módulos CSS
Estilo embutido
Para estilizar um elemento com o atributo de estilo embutido, o valor deve ser um objeto JavaScript:
Exemplo:
Insira um objeto com as informações de estilo:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Nota: Em JSX, as expressões JavaScript são escritas dentro de chaves, e como os objetos JavaScript também usam chaves, o estilo no exemplo acima é escrito dentro de dois conjuntos de chaves {{}}.
Nomes de Propriedades CamelCased
Como o CSS inline é escrito em um objeto JavaScript, as propriedades com separadores de hífen, como background-color, devem ser escritas com a sintaxe camel case:
Exemplo:
Use backgroundColorem vez de
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Objeto JavaScript
Você também pode criar um objeto com informações de estilo e referenciá-lo no atributo style:
Exemplo:
Crie um objeto de estilo chamado myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Obter certificação!
$ 95 INSCRIÇÃO
Folha de estilo CSS
Você pode escrever seu estilo CSS em um arquivo separado, basta salvar o arquivo com a
.cssextensão do arquivo e importá-lo em seu aplicativo.
App.css:
Crie um novo arquivo chamado "App.css" e insira algum código CSS nele:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Nota: Você pode chamar o arquivo como quiser, apenas lembre-se da extensão correta do arquivo.
Importe a folha de estilo em seu aplicativo:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
Módulos CSS
Outra maneira de adicionar estilos ao seu aplicativo é usar Módulos CSS.
Módulos CSS são convenientes para componentes que são colocados em arquivos separados.
O CSS dentro de um módulo está disponível apenas para o componente que o importou, e você não precisa se preocupar com conflitos de nome.
Crie o módulo CSS com a .module.css
extensão, exemplo: my-style.module.css.
Crie um novo arquivo chamado "my-style.module.css" e insira algum código CSS nele:
meu-estilo.módulo.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importe a folha de estilo em seu componente:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importe o componente em seu aplicativo:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));