styled-components Logo

Visual primitives for the component age.

Use the best bits of ES6 and CSS to style your apps without stress 💅

const Button = styled.a`
	/* This renders the buttons above... Edit me! */
	display: inline-block;
	border-radius: 3px;
	padding: 0.5rem 0;
	margin: 0.5rem 1rem;
	width: 11rem;
	background: transparent;
	color: white;
	border: 2px solid white;

	/* The GitHub button is a primary button
	 * edit this to target it specifically! */
	${props => props.primary && css`
		background: white;
		color: palevioletred;
	`}
`

Used by folks at

Stars on GitHubCurrent versionMonthly downloadsGzipped sizeJoin the community on Spectrum

Getting started

Installation

To download styled-components run npm install --save styled-components. That's all you need to do, you are now ready to use it in your app! (yep, no build step needed 👌)

Your first styled component

Let's say you want to create a simple and reusable <Button /> component that you can use throughout your application. There should be a normal version and a big and primary version for the important buttons. This is what it should look like when rendered: (this is a live example, click on them!)

First, let's import styled-components and create a styled.button:

import styled from 'styled-components';

const Button = styled.button``;

This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal. You know how you can call functions with parenthesis? (myFunc()) Well, now you can also call functions with backticks! (myFunc``, here is an explanation of how that works exactly)

If you render our lovely component now (just like any other component: <Button />) this is what you get:

It renders a button! That's not a very nice button though 😕 we can do better than this, let's give it a bit of styling and tickle out the hidden beauty within!

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
`

As you can see, styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc. It also binds styles to components, which has some interesting properties. (learn more about the ideas behind styled-components here)

The last step is that we need to define what a primary button looks like. To do that we interpolate a function into our template literal, which gets passed the props of our component:

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`

All we're saying here is that when the primary property is set we want to add some more css to our component, in this case change the background and color.

That's all, we're done! Take a look at our finished component:

const Button = styled.button`
	border-radius: 3px;
	padding: 0.25em 1em;
	margin: 0 1em;
	background: transparent;
	color: palevioletred;
	border: 2px solid palevioletred;

	${props => props.primary && css`
		background: palevioletred;
		color: white;
	`}
`

render(
	<div>
		<Button>Normal Button</Button>
		<Button primary>Primary Button</Button>
	</div>
)

Nice 😍 That's a live updating editor too, so play around with it a bit to get a feel for what it's like to work with styled-components!

Once you're done take a look at the documentation, specifically the Getting started section! Enjoy ✨