Using Styled Components with React

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 Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like