# ReactSnippet: How To
---

## Style React Components
---

### Description
We’ll consider different ways to style your React components. <br />
In the [previous article](https://github.com/andrewsinelnikov/ReactSnippet-How-To/edit/main/task11/README.md), we created a component **Title**. Let's stylize it

### 1 Styling in App.css
Write all your styles here <br />
<img src="img/1.png" width="100%"><br/>
Export it into **App.js** (styles will be available for the whole application)
<img src="img/2.png" width="100%"><br/>
Add style to your components
<img src="img/3.png" width="100%"><br/>

### 2 CSS Modules
It helps to keep styles structured <br />
Create CSS file with the **.module.css** extension in the same folder with your component and write all your styles there <br />
<img src="img/4.png" width="100%"><br/>
Export it into your component and use
<img src="img/5.png" width="100%"><br/>

### 3 Styled-Components
Install styled-components to your application
<img src="img/6.png" width="100%"><br/>
Create your styled components in separate file
<img src="img/7.png" width="100%"><br/>
Export it into your component and use
<img src="img/8.png" width="100%"><br/>

**You've got it! 🎉**<br />
It's up to you what way to use

Source files 📁 [here](https://github.com/andrewsinelnikov/ReactSnippet-How-To/tree/main/task13/src)

#### Got a question ❓   [✉️](https://twitter.com/Andrew79361148)

Want to know more? 👉 [Read next](https://github.com/andrewsinelnikov/ReactSnippet-How-To/blob/main/README.md)
