Skip to content

Instantly share code, notes, and snippets.

@bharathvaj-ganesan
Created February 8, 2018 08:54
Show Gist options
  • Save bharathvaj-ganesan/9f7c99674d3cae94fa9cb2a91f1c0883 to your computer and use it in GitHub Desktop.
Save bharathvaj-ganesan/9f7c99674d3cae94fa9cb2a91f1c0883 to your computer and use it in GitHub Desktop.
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;
`;
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment