Creating React Components with Styling with the styled-components Package

React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at how to use the styled-components package to create components that has styling without writing lots of boilerplate code.

Why Do We Need This Package?

The styled-components package lets us create components with styling injected by us without writing lots of code.

Class names are generated automatically with the styling code so that we don’t have to write them ourselves. Therefore, we don’t have to worry about duplication or conflicts.

CSS can easily be deleted if it’s unused. This is a feature that normal CSS doesn’t have.

Dynamic styling is also easy to add by passing in our own props to our styled-components created with styled-components .

Vendor prefixes are also applied to styles automatically so that we don’t have to type them ourselves.

Installation

We can install it by running:

npm install --save styled-components

Getting Started

After installation, we can define our components with the built-in template tags. Template tags are just functions. In this case, they return components that we can use.

For instance, we can create a styled h1 element by writing:

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

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: green;
`;

export default function App() {
  return (
    <div className="App">
      <Title>Hello</Title>
    </div>
  );
}

In the code above, we used the styled.h1 tag to with styles inside the template string to create the Title component. We used it as we did in the App component.

We specified that Title has font-size 1.5em, is centered, and the color is green. Therefore, that’s what we should see when we use it in App .

We can nest these components as we do with normal HTML elements. For instance, we can write:

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

const Wrapper = styled.div`
  padding: 4em;
  background: yellow;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: green;
`;

export default function App() {
  return (
    <div className="App">
      <Wrapper>
        <Title>Hello</Title>
      </Wrapper>
    </div>
  );
}

In the code above, we added the Wrapper component, which has a yellow background and some padding.

App uses wrapper, which wraps around our Title component. Therefore, now we should see a yellow background with the green title text inside.

Adding Dynamic Styling with Props

We can pass in props into a styled component and access the props via the props variable as we do with any other component. For instance, we can turn our Title component into a dynamically styled component by writing:

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

const Title = styled.h1`
  font-size: 1.5em;
  color: ${props => (props.primary ? "red" : "green")};
`;

export default function App() {
  const [primary, setPrimary] = React.useState(false);
  return (
    <div className="App">
      <button onClick={() => setPrimary(primary => !primary)}>Toggle</button>
      <Title primary={primary}>Hello</Title>
    </div>
  );
}

In the code above, we have:

color: ${props => (props.primary ? "red" : "green")};

The props is what we passed in as props, which we did with:

<Title primary={primary}>Hello</Title>

With the button in App , we toggled the primary prop’s value, so that we toggle between red and green as we click on the Toggle button.

Extending Styles

We often have to create a styled component, but with some slight variations. To do this with styled-components without duplicating code, we can use the styled function as follows:

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

const Title = styled.h1`
  color: palevioletred;
  font-size: 1.5em;
  margin: 1em;
`;

const GreenTitle = styled(Title)`
  color: green;
`;

const BlueTitle = styled(Title)`
  color: blue;
`;

export default function App() {
  return (
    <div className="App">
      <Title>hello</Title>
      <GreenTitle>hello</GreenTitle>
      <BlueTitle>hello</BlueTitle>
    </div>
  );
}

In the code above, we have Title , which serves as a base component for creating GreenTitle and BlueTitle . We used the styled function with Title passed in, which returns a new template tag. Then we used that with new color styles to create an h1 element with new colors.

Therefore, once we put them in App , we should see them all rendered.

Conclusion

With the styled-components package, we can create HTML elements with the styles we want baked-in. The return elements can take props which allows for dynamic styling. All we have to do is used the built-in template tags with the styles we want to add, and it’ll return the styled elements for us to use.