26/04/2021 0501-css-import

CSS
CSS Import

useForm 0411
Import
Desa o Formulários 0412

CSS A forma mais simples de uso do CSS é importando o mesmo direto no JavaScript. A
importação é efetuada pelo Webpack
CSS Import 0501

Import
App.js

Componentes COPIAR

import './App.css';
Con ito

Evite Con itos const App = () => {

return (
CSS Modules 0502 <div className="container">
Styled Components 0503 <p className="text">Meu site</p>
</div>
CSS Frameworks 0504
);
Animações 0505
};
Imagens 0506

React Router App.css

Router 0601

Link 0602 .container {

max-width: 30rem;
useParams 0603
margin: 0 auto;
Nested Routes 0604
}
Head 0605

Desa ESC Inicia Slide

o Router 0606
Seta .text
->/<- {Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper

https://www.origamid.com/slide/react-completo/#/0501-css-import/1 1/6
26/04/2021 0501-css-import

font-weight: bold;
}

useForm 0411

Desa o Formulários 0412

Componentes

CSS Ao importar um componentes, os estilos importados do mesmo são automaticamente

CSS Import 0501 adicionados ao CSS nal da build. Independente de você utilizar o componente ou não.
Import App.js
Componentes

Con ito import './App.css';

import Title from './Components/Title';
Evite Con itos

const App = () => {

CSS Modules 0502
return (
Styled Components 0503
<div className="container">
CSS Frameworks 0504 {/* <Title text="Meu título" /> */}

Animações 0505 <p className="text">Meu site</p>

</div>
Imagens 0506
);
React Router };
Router 0601

Link 0602 Title.js

useParams 0603

Nested Routes 0604 import './Title.css';

Head 0605
const Title = ({ text }) => {
Desa ESC Inicia Slide
o Router 0606
Seta ->/<- Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper

https://www.origamid.com/slide/react-completo/#/0501-css-import/1 2/6
26/04/2021 0501-css-import

return <h1 className="Title">{text}</h1>;

};

Title.css
useForm 0411

Desa o Formulários 0412 .Title {

font-size: 2rem;
CSS
font-family: Cambria, serif;
CSS Import 0501
}
Import

Componentes

Con ito

Evite Con itos

Conflito

Todos os arquivos serão unidos em um CSS nal e você é responsável por garantir que os
CSS Modules 0502
seletores sejam especí cos, para evitar con ito.
Styled Components 0503

CSS Frameworks 0504 import Title from './Components/Title';

Animações 0505 import Produto from './Components/Produto';

Imagens 0506
const App = () => {
React Router return (
Router 0601 <div>
Link 0602 <Title text="Meu título" />
<Produto />
useParams 0603
</div>
Nested Routes 0604
);
Head 0605 };
Desa ESC Inicia Slide
o Router 0606
Seta ->/<- Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper

https://www.origamid.com/slide/react-completo/#/0501-css-import/1 3/6
26/04/2021 0501-css-import

Title.js

import './Title.css';

useForm 0411 const Title = ({ text }) => {

return <h1 className="Title">{text}</h1>;
Desa o Formulários 0412
};
CSS
CSS Import 0501
Title.css
Import

Componentes .Title {

Con ito font-size: 2rem;

font-family: sans-serif;
Evite Con itos
}

CSS Modules 0502

Produto.js
Styled Components 0503

CSS Frameworks 0504

import './Produto.css';
Animações 0505

Imagens 0506 const Produto = () => {

return <h1 className="Title">Notebook</h1>;
React Router
};
Router 0601

Link 0602
Produto.css
useParams 0603

Nested Routes 0604

h1 {
Head 0605 color: tomato;
Seta }
Desa ESC Inicia Slide
o Router 0606
->/<- Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper

https://www.origamid.com/slide/react-completo/#/0501-css-import/1 4/6
26/04/2021 0501-css-import

h1.Title {
font-family: serif;
}

useForm 0411

Desa o Formulários 0412

main.css (bundle nal)

CSS
.Title {
CSS Import 0501
font-size: 2rem;
Import font-family: sans-serif;
Componentes }
h1 {
Con ito
color: tomato;
Evite Con itos
}
h1.Title {
CSS Modules 0502
font-family: serif;
Styled Components 0503 }
CSS Frameworks 0504

Animações 0505

Imagens 0506
Evite Conflitos
React Router
Router 0601 De na nomes únicos para os componentes e coloque classes com os mesmos nomes
Link 0602

useParams 0603 import './UserForm.css';

Nested Routes 0604

const UserForm = () => {
Head 0605
return (
ESC Inicia Slide Seta ->/<- Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper
Desa o Router 0606 <div className="UserForm">
https://www.origamid.com/slide/react-completo/#/0501-css-import/1 5/6
26/04/2021 0501-css-import

<h1>Formulário</h1>
<p className="UserFormText">Esse texto.</p>
</div>
);
};
useForm 0411

Desa o Formulários 0412

UserForm.css
CSS
CSS Import 0501
.UserForm h1 {
Import color: tomato;
Componentes }

Con ito
.UserFormText {
Evite Con itos
font-family: serif;
}
CSS Modules 0502

Styled Components 0503

CSS Frameworks 0504

Animações 0505

Imagens 0506

React Router
Router 0601

Link 0602

useParams 0603

Nested Routes 0604

Head 0605

ESC Inicia Slide Seta ->/<- Navegação Slide SHIFT + Seta ->/<- Muda a Aula H Fecha/Abre Helper
Desa o Router 0606

https://www.origamid.com/slide/react-completo/#/0501-css-import/1 6/6