What’s a Styled Component and how it’s different from Component styled with CSS

Why Styled Component???

The simple concept on which the whole modern web applications are built is that in order for us to make the webpages desirable we have to style them and for styling purpose we use CSS. Let’s assume we are building a large scale application and we the developers have so much on our plate that we really don’t keep track of all the classes that are being used in the pages and thus we end up getting the Class Name Collisions and that my friend is a pain in the ***. And hey everyone must have encountered the The Performance Guy, ‘make the css load faster’, ‘why is ‘it taking so much time to load resources’, you know that guy.

So what’s the solution then……

Well something called CSS-in-JS.

What is CSS-in-JS you ask? The simple answer would be:-

CSS-in-JS is a styling approach that abstracts the CSS model to the component level, rather than the document level. This is the idea that CSS can be scoped to a specific component only and as opposed to the document level. The benefits of using CSS-in-JS includes:

CSS-in-JS would mean that we don’t have to make HTTP requests to load assets and resources.(Took care of the Performance Guy)

Using CSS-in-JS means you can write styles freely without worrying about compatibility issues.(Took care of the Class Name Collisions)

The styled-components library is just an implementation of the CSS-in-JS concept and here are some of the advantages of Styled Component:-

• Only the necessary CSS: Styled Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No more class name bugs: Styled Components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Automatic deletion of CSS: In Styled Components every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
• Easy Maintenance : No more headaches for searching through files for a particular styling that is affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

Getting Started

Enough with the boring stuff, let’s move to the fun part, let’s see how can we make Styled Components. First we have to install Styled Components using NPM, with the command below:

npm install styled-components

Ok now that we have installed the styled-components let make our first Styled Component.

import React from 'react';
import Styled from "styled-components";
import './App.css';
const MyDiv = Styled.div`
  background: red;
  height: 50px;
  width: 50px;
  margin: 0 auto;
`;
function App() {
  return (
    <div className="App">
        <MyDiv>
         <p className="para">Learn React</p>   
        </MyDiv>
    </div>
  );
}

export default App;

As you can see above, Styled Components allows you to write CSS just the way you’d write in your normal style.css document.

Styled Components also allows you to dynamically set CSS properties using props. You can pass a function to your style declarations, with one parameter, being the component’s prop value. You can then use props to adjust your styling as seen in the MyDiv example below:

import React from 'react';
import Styled from "styled-components";
import './App.css';
const MyDiv = Styled.div`
  background: ${props => (props.danger ? 'red' : 'blue')};
  height: 50px;
  width: 50px;
  margin: 0 auto;
`;
function App() {
  return (
    <div className="App">
        <MyDiv danger>
         <p className="para">Learn React</p>   
        </MyDiv>
    </div>
  );
}

export default App;

As Mentioned above we can write the css just the way you’d write in your normal style.css document. So now the question arrives can we use nested classes for styling the children element and the answer is of course we can. Below is an example of such case.

import React from 'react';
import Styled from "styled-components";
import './App.css';

function App() {
  const MyDiv = Styled.div`
  background: ${props => (props.danger ? 'red' : 'blue')};
  height: 50px;
  width: 150px;
  margin: 0 auto;
  .para {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

    &:hover{
       opacity:0;
    }
  }
  .my-btn{
    height: 25px;
    width: 50px;
    font-size: 16px;
    background: #fff;
    outline: none;
    border: none;
    margin-top: 10px;
    cursor: pointer;
    &:hover{
       background: red;
       color: #fff;
    }
  }
`;
  return (
    <div className="App">
        <MyDiv danger>
          <p className="para">Danger Text, Hover on me</p>  
        </MyDiv>
         <MyDiv>
          <button className="my-btn">Hello</button>
        </MyDiv>
    </div>
  );
}

export default App;

Extending an existing Styled Component

Let’s assume you have one component and you want to create a similar one, styled slightly differently, in that case you can use extend and this is how it goes:

const Div = Styled.div`
  background: transparent;
`

const RedDiv = Button.extend`
  background: red;
`

render(
  <>
    <Div>A div with transparent background.</Div>
    <RedDiv>A div with red background.</RedDiv>
  </>
)

Conclusion

This is just an introduction to get you started with Styled Components. The above post will help you get an understanding of the concept and help you get up and running with the way of using CSS in JavaScript. But to get deeper into all the advance stuff for the Styled Components and believe me there is a lot here’s a link to take care of all your needs https://styled-components.com/docs and to see all the above written code working you can use this link https://repl.it/@sagarchand07/styled-component. Ohhh and one more thing YOU ARE WELCOME……..