Styled Components - Simple Theme Provider

simple-theme-provider.js

import React from 'react';
import ReactDOM from 'react-dom';
import styled, { ThemeProvider } from 'styled-components';

// Define theme constants
const theme = {
  titleFontSize : '24px',
  titleFontSizeMD : '32px'
};

// Render ThemeProvider in component hierarchy
// pass theme via props
const App = () =>(
  <ThemeProvider theme={theme}>
    <Title>Yay</Title>
  </ThemeProvider>
);

// props.theme is available to deep nested styled-components
const Title = styled.h2`
  font-size: ${({theme}) => theme.titleFontSize};
  @media (min-width: 768px) {
    font-size: ${({theme}) => theme.titleFontSizeMD};
  }
`;

// Render React App
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);