The Ultimate Introduction to styled-components

You want to learn styled-components?

Then you've come to the right place - in this article we will go through all the features you need to know without any prior knowledge.
Here is the overview of the topics we are going through:

Let's go!

#Installation & Basic Styling

styled-components can be installed via NPM like almost everything else you need to develop with React.js.

npm install styled-components or yarn add styled-components

Then we can import the library into React.js, and create our first styled component, which we do by calling the function. As parameters in the backticks we pass the individual styles, as we know them from CSS. 

import React from "react"
import styled from "styled-components"

const Headline = styled.h1`
  color: green;
`

function App() {
  return (
    <Headline>
      The Headline
    </Headline>
  )
}

It was that easy to create a component - and save it in the variable Headline.

styled.h1 indicates that we want to use an H1 tag as HTML element. So our headline component is now an H1 with the CSS properties we passed in the backticks.

Inside the back-ticks we write the CSS code exactly as we would write it in a CSS file or style-tag - mind line breaks and semicolon.

vscode-styled-components is a great extension for VS Code

As an example we can combine a few styles - it works just like in normal CSS. 

import React from "react"
import styled from "styled-components"
        
const Headline = styled.h1`
  color: green;
  font-family: Arial;
`

#Extending Styles

To transfer styles from one styled component to another, you can also nest the components - e.g. the headline in a div.

In the following example we connect both components, then the H1 tag will appear green. 

const Wrapper = styled.div`
  color: green;
`
const Headline = styled.h1`
  font-family: Arial;
`

function App() {
    return (
      <Wrapper>
        <Headline>
          This is the headline
        <Headline>
      <Wrapper>
    );
  }

But we can also use an existing styled component to enhance another one in its styling.

For this we simply pass the component we want to extend the other one as parameter. In the example the Headline-component becomes red AND italic. 

const Headline = styled.h1`
  color: green;
`

const HeadlineItalic = styled(Headline)`
  font-style: italic;
`

#Styled Components & Props

Props in React.js are one of the most important and powerful concepts - they make our applications much easier and more dynamic.

We can also use them in styled-components, e.g. to display CSS-styles based on certain conditions. Inside the backticks in JavaScript we can most elegantly pass the $ sign to dynamic code, and thus return as CSS value something from JavaScript.

In the example we do this with a props named color. The value of the props becomes the value of the CSS property.

const Text = styled.p`
  color: ${props => props.color};
`
  
function App() {
  return <Text color="green">Hi!</Text>
}

This is pretty cool, but we can also work with conditionals.

For this we use the JavaScript if-else-shorthand-syntax. If props.show is true then visible is used as CSS value, otherwise the JS code returns hidden. 

const Text = styled.p`
  visibility: ${props => (
    props.show ? "visible" : "hidden")
  };
`
    
function App() {
  return <Text show={true}>Hi!</Text>
}

#Themes

To make styling a little easier and to make us repeat ourselves less often, there are themes that we can define and use.

We build in a theme by nesting our code in the ThemeProvider, which will get the corresponding theme as props. We can save the theme itself as a simple object. 

import styled, { ThemeProvider} from "styled-components"

const Headline = styled.h1`
  color: ${props => props.theme.main};
`
    
const theme = {
  main: "#14314a"
}
    
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Headline>Welcome!</Headline>
    </ThemeProvider>
   )
}

#Advanced

The following is one of my favorite features in styled-components - we can connect components and react when something happens to another component. For example a hover event.

Therefore we simply add another component to our styling, and define for which event we want to do something.

However, the components must be nested. In the example the text-component is inside the wrapper, when the wrapper is hovered, the color of the text changes. 

const Wrapper = styled.div`
  height: 400px;
  background-color: grey;
`

const Text = styled.div`
  color: red;
  ${Wrapper}:hover & {
    color: blue;
}`
  
function App() {
  return (
    <Wrapper>
      <Text>Hi!</Text>
    </Wrapper>
  )
}

With styled-components we can even style existing components, which are e.g. provided by some library, afterwards.

This basically applies to all React.js components that get their classNames via props. 

const Headline = ({ className, children}) => (
  <h1 className={className}>{children}</h1>
)
    
const HeadlineStyled = styled(Headline)`
 color: red;
`

Maybe you don't like the backtick-syntax of styled-components so much - then you can use an object-syntax that is supported as well.

You may know it from React Native.
It is important to note that we can no longer write exact CSS code, but have to do without hyphens. Instead of hyphens we use Camel-Case, so we capitalize the following word. font-family becomes fontFamily. 

const Headline = styled.h1({
  color: "red",
  fontSize: "50px"
})

That's it - thank you for reading, I hope this article helped you to understand styled-components.

If you want to see everything at a glance, you should have a look at our cheat sheets for styled-components.