How to use Styled Components in React
Tags: react, styledcomponents, javascript
Published: 2019-11-18 14:20:21

---
title: How to use Styled Components in React
published: true
description: Add custom, dynamic CSS styles inside your React Components
tags: reactjs, styled components, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191004-styled-components.jpeg
---

## Add custom, dynamic CSS styles inside your React Components

Yesterday we talked about `ReactStrap` and how that library makes it quick and easy to bootstrap a React application by importing components that are already styled.

This may not be a good solution in all cases, though. What if you really need to add custom styles to your application?

If you want to keep control on your CSS styling but at the same time want the flexibility and dynamicity of Javascript, you may want to consider Styled Components.

Styled Components is a library that gives you a way to create your own styles inside a Javascript component.

This works differently than ReactStrap, in the way that it lets you define your own styles for components inside the Javascript files.

To use Styled Components we first need to install the library with this syntax:

```
npm install styled-components
```

Then we need to import it into the file where Styled Components are defined:

```js
import styled from 'styled-components';
```

Now we are ready to used Styled Components.
In the example below, we create a `StyledButton` component.

`StyledButton` is assigned the result of a function call to `styled.button`
The call to `styled.button` is followed by backticks. In this context, backticks are a way to use a construct called *tagged template literal* which is a fancy way to pass arguments into a function.

Inside the backticks we define the CSS styles for this button:

```js
const StyledButton = styled.button`
  background-color: gray;
  border: 1px solid black;
  padding: 4px 10px;
  color: white;
  border-radius: 6px;
`
```

When we render the `StyledButton` component it will have the styles we have defined above.

```js
render(
  <div>
    <StyledButton>Styled component button</StyledButton>
  </div>
)
```

Inside the backticks we can also add Javascript code that performs dynamic actions.
Below we extend the CSS for `StyledButton` with some Javascript code that looks at the props we pass into the component and adds extra CSS based on some condition:

```js
const StyledButton = styled.button`
  background-color: transparent;
  border: 1px solid palevioletred;
  padding: 4px 10px;
  border-radius: 6px;

  ${ props => 
      props.primary && 
      css`
        background: palevioletred;
        color: white;
      `
  }
`
```

This is saying: if we have `props.primary` passed into this component, then change the background color.

To make this work, we need to pull in the `css` function, which is made available from `styled-components`, so we need to have this import directive at the top of our file:

```js
import styled, { css } from 'styled-components';
```

With Styled Components you can also use `SASS` syntax and nest the elements:

```js
&:hover {
  background-color: #9c274e;
  color: white;
}
```

We can extend those styled components by passing the original component to the `styled` function. The `styled` function is a high order function that takes a component and returns another component, adding to it the extended styles that we defined.

As a quick example of this feature, in the code below we are defining a `TomatoButton` component that takes the styles from `StyledButton` and extends them with extra styles.
We then use `TomatoButton` in our code. Remember, we need to import `styled` from `styled-components` for this to work.

```js
import styled from 'styled-components';

const TomatoButton = styled(StyledButton)`
  color: tomato;
  border-color: tomato;
`
```

You can read more about Styled Components on their homepage: https://www.styled-components.com