How to use styled-components in React?

Using styled-components is a very good way of writing CSS in React based applications. In styled-components, we create reusable components inside our javascript files and put CSS code right into them. Let me show you how to use styled-components by giving examples.

First, create a React app and then install styled-components from npm like this:

npm install styled-components

After that, we’re ready to jump into examples:

Basics

Styled components use javascript template literals syntax. As you can see in the below code, we can put our styled component below(or above, not really matters) our actual component and use it inside our actual component.

import styled from 'styled-components';//Don't forget to import
const App = () => {
  return (
    <>
      <StyledButton>
        Hello
      </StyledButton>
    </>
  )
};
const StyledButton = styled.button`
height:4rem;
font-size:2rem;
padding:1rem;
color:white;
border:none;
border-radius:0.5rem;
background-color:pink;
`

The output is like this:

We can put button element attributes like onClick easily. Let’s modify our App component like this:

const App = () => {
  const [text, setText] = useState("Javascript");
  const buttonClickHandler = () => {
    setText("Clicked");
  }
return (
    <>
      <div>{text}</div>
      <StyledButton onClick={buttonClickHandler}>
        Hello
      </StyledButton>
    </>
  )
};

And when we click on the button, the text upside changes, like this:

Extending Styles

Sometimes, we can have a component with styles and another component with just background-color changed. Duplicating the first one’s CSS into the other wouldn’t be good for our code. We can easily create a styled component from another styled component. For example, let’s say we have a Message component and also an ErrorMessage component. The only difference between them is their background-color. Check out the below code:

import styled from 'styled-components';
const App = () => {
return (
    <>
      <Message>
        Javascript is the coolest programming language.
      </Message>
      <ErrorMessage>
        Danger ! Danger !
      </ErrorMessage>
    </>
  )
};
const Message = styled.div`
border:2px solid black;
border-radius:0.5rem;
width:10rem;
padding:2rem;
color:white;
background-color:green;
font-size:1.25rem;
line-height:1.25;
margin-top:1rem;
`
const ErrorMessage = styled(Message)`
background-color:red;
`

Passed props

We can create different styles for different props. Example:

import styled from 'styled-components';
const App = () => {
return (
    <div>
      <StyledTitle dark>
        Javacript is cool
      </StyledTitle>
    </div>
)
};
const StyledTitle = styled.div`
/* Adapt the colors based on dark prop */
font-size:3rem;
background-color:${props => props.dark ? "black" : "yellow"};
color:${props => props.dark ? "white" : "black"};
`

Note: Attention to the comment in StyledTitle . We can use comments in styled-components.

Output is like this when the dark prop is passed:

And like this when the dark prop is not passed:

Passed props with css

There’s a special helper function to generate CSS from a template literal with interpolations, called css. The below code uses a custom hook called useResponsivity and we can pass isOnMobile data as a prop to our StyledApp.

import React from 'react';
import styled, { css } from 'styled-components';
import useResponsivity from './hooks/useResponsivity';
const App = () => {
  const isOnMobile = useResponsivity();
  return (
    <StyledApp isOnMobile={isOnMobile}>
      {isOnMobile ? "On Mobile" : "Not on Mobile"}
    </StyledApp>
  )
};
const StyledApp = styled.div`
width:100%;
height:100vh;
background-color:blue;
color:white;
padding:3rem;
font-size:3rem;
${({ isOnMobile }) =>
    isOnMobile && css`
background-color:red;
`}
`

And the output is:

styled-components use a preprocessor called stylis and it supports scss-like syntax. & , a single ampersand refers to all instances of the component, it’s used for applying broad overrides. Checkout the code:

import styled from 'styled-components';
const App = () => {
return (
    <StyledApp>
      <button>
        Click me !
      </button>
<div className="coolDiv">
        styled-components
      </div>
    </StyledApp>
)
};
const StyledApp = styled.div`
width:100%;
height:100%;
& button {
  border:none;
  border-radius:0.5rem;
  padding:2rem;
  font-size:1.5rem;
  color:white;
  background-color:blue;
  
  &:focus{
    background-color:red;
  }
}
& .coolDiv{
background-color:green;
font-size:1.5rem;
margin-top:2rem;
padding:1rem;
}
`

Output:

When focused on the button:

And that’s it for this article I hope you enjoyed and learned a lot.