Styled components

site/src/layouts/index.js

@@ -1,44 +1,43 @@
-import React from 'react';
-import injectSheet from 'react-jss';
-import {object, func} from 'prop-types';
+import {func} from 'prop-types';
 import Link from 'gatsby-link';
+import React from 'react';
+import styled from 'react-emotion';
 
-const Layout = ({classes, children}) => (
-  <div className={classes.layout}>
-    <header className={classes.header}>
+const Page = styled('div')({
+  margin: '1em auto',
+  maxWidth: '960px'
+});
+
+const Header = styled('header')({
+  display: 'flex',
+  alignItems: 'baseline',
+  padding: '0 2em',
+  marginBottom: '2em',
+  '& h1': {
+    margin: '0 auto 0 0'
+  }
+});
+
+const Main = styled('main')({
+  padding: '0 2em'
+});
+
+const Layout = ({children}) => (
+  <Page>
+    <Header>
       <h1>
         <Link to="/">OpenLayers</Link>
       </h1>
       <div>
         <Link to="/examples/">examples</Link>
       </div>
-    </header>
-    <main className={classes.main}>{children()}</main>
-  </div>
+    </Header>
+    <Main>{children()}</Main>
+  </Page>
 );
 
 Layout.propTypes = {
-  children: func.isRequired,
-  classes: object.isRequired
+  children: func.isRequired
 };
 
-const styles = {
-  layout: {
-    margin: '1em auto',
-    maxWidth: '960px'
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'baseline',
-    padding: '0 2em',
-    marginBottom: '2em',
-    '& h1': {
-      margin: '0 auto 0 0'
-    }
-  },
-  main: {
-    padding: '0 2em'
-  }
-};
-
-export default injectSheet(styles)(Layout);
+export default Layout;