Getting Started with Styled Component

Styled-components is CSS-in-JS styling framework in react. There are many advantages of using Styled components so before jumping into it directly let's see some advantages of it .

Why Styled Components?

1. CSS class name Bugs - Writing plain CSS in react using classnames can cause unexpected overwrite or duplications but Styled component generates unique classes for defined style.

2. Reusable - Like normal react component you can create reusable components like button, forms, tables, sections, etc hence avoid duplication of code.

3. Dynamic Styling - Using props you can do dynamic styling again avoids duplication of styles.

4. Writing pure CSS - you can write pure CSS inside styled component. So no more styles as a javaScript objects as it is in other styling solutions in react.

5. Performace - This framework is very smart. It doesn't loads all styles at once but only loads the rendered component styles.

Installation

Let's install styled components in your React App -

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

Once the library is installed you need to import styled from styled-component package just like this

import styled from "styled-components";

In styled components you don't need to write styles as an object inside jsx components instead it uses tagged template literarals in JS which provides power to use plain CSS inside JS for react component.That style get attached to defined component itself.

Creating a component

So let's start with creating a button-

 import styled from "styled-components";

const Button = styled.button`
  margin:10px;
  padding: 5px 10px;
  border: 2px solid green;
  border-radius: 3px;
  color:green;
`


// Utilizing above Button Component
<Button>Click</Button>
<Button>Click</Button>
<Button>Click</Button>

We can create as many button components as we want by just duplicating it. Superb right ? . But of course we generally don't want only one type of button for our dream websites.

Passing props and changing component styles

Styled component allows us to pass a function inside template literals to adapt different style based on props. Let's see by an example -

const Button = styled.button`
  margin:10px;
  padding: 5px 10px;
  border:${props => props.primary ? "none" : "2px solid green"};
  border-radius: 3px;
  color:green;
  background-color:${props => props.primary ? "orange" : ""}
`
    <Button>Normal</Button>
    <Button primary>Primary</Button>

We can also render styled component inside another component. This can be useful in cases like if we have several buttons and link whose styling can be same. Even we can swap the tag, We can use the "as" polymorphic prop to dynamically swap out the element that receives the styles we wrote earlier :

    const NewButton = styled.(Button)`
     color:white;
    background-color:black;
`
    <Button>Normal</Button>
    <Button primary as="a" href="#">Primary</Button>
<NewButton>NewButton</NewButton>

Here we have same button component but the second is of <a></a> tag and third one is a new button with inherits overrides the CSS of Button component and defines new styles for its own.

Let's Now see how we can style other components using styled component.

const Wrapper = styled.div`
background-color:whitesmoke;
color:green;
text-align:center;
`
const Header = styled.h1`
color:orange;
`
const Button = styled.button`
  margin:10px;
  padding: 5px 10px;
  border:2px solid green;
  border-radius: 3px;
  color:green;
`

<Wrapper>
    <Header>
      Hello World!
    </Header>
 <Button>Click me</Button>
  </Wrapper>

Here we have a Wrapper components and Header component as h1 tag and a button component so this way we can style the components in styled component.

Creating a global style file

Now for overriding Browsers default styling or for setting fonts, or colors we can create a global style file .For that styled component provide createGlobalStyle function. Let's see how we can override the Browser default Styles.

// globalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    background: teal;
    font-family: Open-Sans, Helvetica, Sans-Serif;
  }
`;

export default GlobalStyle;

// Inside App.js file

import "./globalStyles.js"
function App() {
  return (
   <>
    <GlobalStyle />
   </>
 )}

And here we go !!! Global styling is all done with styled components.

Conclusion

• CSS-in-JS Framework
• No Classname bugs
• Dynamic Styling
• fully performance optimized
• Super easy to install and use
• can create global stylesheet file
• can write JS inside CSS and manipulate style based on props

So next time whenever you start a new project can definitely give it a try and I am sure you will love it. Comment your thoughts below. Thanks for giving your precious time. 😇😇 See you in the next blog 👋👋