How to use Styled Components in your ReactJs project
Tags: react, reactnative, javascript, beginners
Published: 2020-02-03 04:51:50

If you are working in ReactJs or css you would have heard this word often  **Styled Components** . So let me give a brief about Styled Components.

####What is Styled Components ?
Styled components is a CSS-in-JS styling framework that uses tagged template literals in JavaScript and the awesome power of CSS to provide a platform that allows you to write actual CSS to style react components 

*seems like lecture right* 😉 ?

Simple , Styled Components is a styling framework where where css and js are going to be in a same react component. 

####How to use Styled Components ?

Just install the [styled-components npm](https://www.npmjs.com/package/styled-components) which doesn't require any babel config 

_import styled from 'styled-components'_ in your react component and styled components will be ready to use 

Here is the initial code done using styled components
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b5fvpmsisj6pp6681pss.png)

seen before right ?? absolutely yes this is seems like the inline style declaration which react recommends not to use _lol_ 😂😂 but here comes the styled components which fixes the inline issue will explain later 

as mentioned in the above code _AppHeader_ is the style function we are using **syled** is imported from 'styled-components' next comes the html tag to be styled here we are using p tag likewise we can use any tag like _'section'_, _'header'_,_'h2'_,_'input'_ etc _

now we need to use the style function we declared as a Tag like we have done here as AppHeader the text or any inside the that tag will follow the style we have mentioned .

_Interesting isn't it !!!! more to come_ 

Now the main question arise for many is (probably raised for me 😉 ) it seems like inline style how it varies ??

Styled Components comes up with a interesting compilation , so when the styled component is complied it adds a style tag warp which differentiates react that the style given is not inline

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qkw11yhnc4s0pba48xl0.png)

_cool !!_  it added a className by itself and the styles we have added in _AppHeader_ remains the same 

More case is I need to have a dynamic colour variable is .css/.less/.sass how could I do that ??? No clue ??? Styled - components solves that to come on now you can pass easily using props 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0wxxs5r4axfff5vn8hrq.png)

react developer can play with style now  😉


####What does Styled Components solve ?
Before going into this let me just recap how we are styling our react components now 

1.The traditional ClassName way 

  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j0yenojinffxl1ekldw5.png)

2.Second is the in-line method which is highly recommenced not to use 
 
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vmmaeyjeldmz75w2jz5d.png)

*So let met come to this heading What does Styled Components solve* ?

* Since it creates className by random hash values the naming conversation will be fixed.

* There won't be style override if there are multiple people working on the styles

* No need to find where the styles are in css files 

* Mainly it will make the react developer to think that css is not an isolated area 


_Hope I have Covered some topics in Styled-Components_
_Have a deep study in their doc_
[_Offical Doc_](https://styled-components.com/)

Keep Coding !