example.js

import React from 'react'
import styled, { injectGlobal, keyframes } from '../dist/styled-components'

export default () => {
  injectGlobal`
    body {
      font-family: sans-serif;
    }
  `

  // 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;
    animation: ${keyframes`from { opacity: 0; }`} 1s both;
  `;

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

  return class Example extends React.Component {
    render() {
      return (
        <Wrapper>
          <Title>Hello World, this is my first styled component!</Title>
        </Wrapper>
      )
    }
  }
}