How to use Styled Components in your ReactJs project
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 ?
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 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
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
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
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
2.Second is the in-line method which is highly recommenced not to use
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