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 ?

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 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
Offical Doc

Keep Coding !

Comments

[Omar Bourhaouta]

One of my favorite features is as, and you can use it like this:

<AppHeader as="div">
So AppHeader tag will be a `div` instead of a `p`
And the best use case for this one is creating dynamic components
such as buttons that can be `a`, `button` or any other HTML tag
</AppHeader>

[Kyle Griffin]

I think it's the best way to currently encapsulate a component within it's own styles, with the ability to dynamically change with the project depending on what it needs to do. Instead of using JS to add and remove classes, styled-components does it better. So it is not only solving a problem, it's improving on an existing solution and is another wooden stake in jQuery's chest.