Questions tagged [styled-components]

styled-components is an open source project developed by Glen Maddern and Max Stoiber that aims to make styling component-based systems, right now solely focussed on React, easier.

This is what using styled-components looks like:

import React from 'react';
import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

These two variables, Title and Wrapper, are now a React components you can render like any other React component:

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

(Live demo)

For more information and examples see the official documentation!