Creating React Components with Styling with the styled-components Package
Tags: react, webdev, programming, javascript
Published: 2021-01-23 19:49:35

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

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.