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.

51

This website collects cookies to deliver better user experience

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