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.

Note: To learn more about custom hooks and useResponsivity, checkout this link :

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:

Pseudoelements, pseudoselectors, and nesting

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.

Avatar photo
👋 Hey, I'm Osman Armut
Hi, I'm Osman Armut. I'm a self taught frontend developer that has a great passion for Javascript and React ecosystem. I use articles in my personal learning journey and I like to share my knowledge to help people.

💬 Leave a comment

Your email address will not be published.

We will never share your email with anyone else.