styled-componets.md

styled-components

styled-components allow you to write actual CSS code in your JavaScript to style your components, removing the mapping between components and styles.

See the official documentation for more information!

Usage

This creates two react components, <Title> and <Wrapper>:

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;
`;

(The CSS rules are automatically vendor prefixed, so you don't have to think about it!)

You render them like so:

// Use them like any other React component – except they're styled!
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

For further examples see the official documentation.