DEV Community

Michael Burrows
Michael Burrows

Posted on • Originally published at w3collective.com

4 1

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

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 like the following:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then imported into React as follows:

import styled from "styled-components";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;  
`;
Enter fullscreen mode Exit fullscreen mode

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")};
`;
Enter fullscreen mode Exit fullscreen mode

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.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay