Skip to content

Using Styled Components with React

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

What are styled-components?

Styled Components allow you to style your App through individual React components.

Learn more with the offical docs: Offical Docs

How to install styled-compoents?

You can install styled components like any other Node Package!

npm install --save styled-components

yarn add styled-components

Once you import styled-components into your project, you are free to style your components however you like. The clever thing about styled-components is that you are creating normal reusable components, with your styles attached to them.

How to use styled-components?

When using styled-components, you dont need to worry about class names, or stylesheets. The styles live in the component files, and can be called and used just like any other JSX.

Below, you can see the H1 variable is just a styled h1 tag, using a template literal. Plain CSS is inside the template literal.


import "./styles.css";
import styled from "styled-components";

const H1 = styled.h1`
  font-family: Ariel;
  font-size: 56px;
  color: blue;
`;

export default function App() {
  return (
    <div className="App">
      <H1>Hello World</H1>
    </div>
  );
}

Here is the rendered H1 component. Rendered Styled Component

Now that we know how to create a styled component, lets use the power of JavaScript to really customize some components. I am talking about styling buttons using props!

Being able to use props in styled components gives you the ability to create multiple buttons without having to create a bunch of CSS classes.

There is a primary prop, which sets the color of the button, and the big prop, which changes the size of the button.


import "./styles.css";
import styled from "styled-components";

const Button = styled.button`
  background: ${(props) => (props.primary ? "Blue" : "white")};
  color: ${(props) => (props.primary ? "white" : "Blue")};
  font-size: ${(props) => (props.big ? "2em" : "1em")};
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid Blue;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div className="App">
      <Button primary>Button 1</Button>
      <Button big>Button 2</Button>
      <Button big primary>
        Big Primary Button
      </Button>
    </div>
  );
}

The props can be used on the same button to create unique components without having to create another component in your app.

Stlyed-Buttons

Here is the project:

I look forward to seeing what you create using styled-components. đź’…

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co