Introduction to styled-components (CSS-in-JS) in React

For the purposes of this tutorial we’ll create a simple component with some text and buttons like the following:

Here’s how the markup for this component would be structured with traditional HTML:

<div class="welcome">
  <h1>Hello World!</h1>
  <p>
    Accusantium enim placeat aperiam asperiores non earum. Sit rerum nihil
    omnis in velit voluptatem. Vero amet exercitationem aut. Praesentium
    sequi quisquam ducimus.
  </p>
  <p>
    Impedit iste fuga architecto. Blanditiis maiores labore sint qui fuga
    nemo id blanditiis. Iusto officia maxime consequatur est voluptatum
    voluptatem aut.
  </p>
  <button type="button" class="btn btn-light">More Info</button> 
  <button type="button" class="btn btn-dark">Get Started</button>
</div>

And the CSS would look something like this:

.welcome {    
  margin: auto;
  max-width: 480px;  
}
h1 {  
  margin-top: 0;
  font-size: 2.5em;  
}
p {
  line-height: 1.4em;
  font-size: 1.2em;
}
.btn {
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  margin: 1em 1em 0 0;
  padding: 0.75em 1em;  
}
.btn-light {
  background-color: blue;
}
.btn-dark {
  background-color: darkblue;
}

Let’s now go through the process of converting this HTML and CSS into a styled-component.

Installation

The styled-components framework can be installed using either NPM or Yarn:

npm install styled-components
yarn add styled-components

Then imported into React as follows:

import styled from "styled-components";

Creating components

First thing we need to do is convert the HTML markup into component based markup:

<Welcome>
  <Heading>Hello World!</Heading>
  <Paragraph>
    Accusantium enim placeat aperiam asperiores non earum. Sit rerum nihil
    omnis in velit voluptatem. Vero amet exercitationem aut. Praesentium
    sequi quisquam ducimus.
  </Paragraph>
  <Paragraph>
    Impedit iste fuga architecto. Blanditiis maiores labore sint qui fuga
    nemo id blanditiis. Iusto officia maxime consequatur est voluptatum
    voluptatem aut.
  </Paragraph>
  <Button light>More Info</Button>
  <Button dark>Get Started</Button>
</Welcome>

Styling components

styled-components utilises tagged template literals to style components. So in order to style our components we need to declare a variable that matches the component name and define what type of HTML element to render (div, h1, p, or button):

const Welcome = styled.div`  
  margin: auto;
  max-width: 480px;  
`;

const Heading = styled.h1`
  margin-top: 0;
  font-size: 2.5em;
`;

const Paragraph = styled.p`
  line-height: 1.4em;
  font-size: 1.2em;
`;

const Button = styled.button`
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  margin: 1em 1em 0 0;
  padding: 0.75em 1em;  
`;

Adjusting styling using props

You may have noticed the buttons have a light & dark property attached to them. You can pass a function to a styled component’s template literal to modify the styling based on the property provided. We’ll change the background color to be light or dark:

const Button = styled.button`
  ...
  background-color: ${(props) => (props.light ? "blue" : "darkblue")};
`;

Conclusion

CSS-in-JS was one of those things I was reluctant to use at first but after spending some time working with styled-components it’s something I’ve grown to enjoy. If you’re interested in learning more about styled-components the full documentation can be found here.