#AD "Ten++ Ways to Make Money as a Developer" eBook by Florin Pop
#react

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

Last modified April 27th 2021 | GitHub Source Code [GitHub]

styled-components provides a way to write CSS-in-JS. It was created to enhance the way CSS is written when styling React components. This tutorial will provide an introduction to styled-components so you can decide if it’s an approach you would like to use in future or existing React applications.

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

Example React styled component

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>
Code language: HTML, XML (xml)

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; }
Code language: CSS (css)

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";
Code language: JavaScript (javascript)

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>
Code language: HTML, XML (xml)

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; `;
Code language: JavaScript (javascript)

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")}; `;
Code language: JavaScript (javascript)

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 working with. If you’re interested in learning more about styled-components the full documentation can be found here.

Related Posts