How to use the react-free-style.create function in react-free-style

import React from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';

const TemplateStyle = create();
const PageStyle = create();

const activeLinkCss = { borderBottomColor: '#f20' };

// Normalize.css v6 (objectified using https://github.com/postcss/postcss-js).
TemplateStyle.registerCss({
  html: {
    lineHeight: '1.15',
    msTextSizeAdjust: '100%',
    WebkitTextSizeAdjust: '100%'
  },
  'article,aside,footer,header,nav,section': { display: 'block' },
  h1: { fontSize: '2em', margin: '0.67em 0' },
  'figcaption,figure,main': { display: 'block' },
  figure: { margin: '1em 40px' },
  hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },
  pre: { fontFamily: 'monospace, monospace', fontSize: '1em' },

import React from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';

const TemplateStyle = create();
const PageStyle = create();

const activeLinkCss = { borderBottomColor: '#f20' };

// Normalize.css v6 (objectified using https://github.com/postcss/postcss-js).
TemplateStyle.registerCss({
  html: {
    lineHeight: '1.15',
    msTextSizeAdjust: '100%',
    WebkitTextSizeAdjust: '100%'
  },
  'article,aside,footer,header,nav,section': { display: 'block' },
  h1: { fontSize: '2em', margin: '0.67em 0' },
  'figcaption,figure,main': { display: 'block' },
  figure: { margin: '1em 40px' },
  hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },

import React from 'react';
import parse from 'date-fns/parse';
import format from 'date-fns/format';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { filterArticles } from '../utils/pages';

const IndexStyle = create();

const subStyle = IndexStyle.registerStyle({
  color: '#777',
  fontSize: '0.8em'
});

module.exports = wrap(
  class extends React.Component {
    render() {
      const pages = filterArticles(this.props.route.pages)
        .sort((a, b) => {
          return a.path < b.path ? 1 : -1;
        })
        .reduce((pages, page) => {
          const parts = page.path.replace(/^\/|\/$/g, '').split('/');

import React from 'react';
import parse from 'date-fns/parse';
import format from 'date-fns/format';
import Helmet from 'react-helmet';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';
import { pageTitle, pageUrl, pageDescription } from '../utils/pages';

const Style = create();
const infoColor = '#777';

const infoStyle = Style.registerStyle({
  margin: '1.5em 0',
  padding: 0,
  color: infoColor,
  fontSize: '0.85em',
  '> li > a': {
    color: infoColor
  },
  '> li': {
    listStyle: 'none',
    display: 'inline-block',
    paddingRight: 20
  }
});

import React, {Component} from 'react';
import {create, injectStyle} from 'react-free-style';

const Style = create();

const CONTAINER_STYLE = Style.registerStyle({
  textAlign: 'center'
});

const BUTTON_STYLE = Style.registerStyle({
  backgroundColor: '#ff0000',
  width: '320px',
  padding: '20px',
  borderRadius: '5px',
  border: 'none',
  outline: 'none',
  '&:hover': {
    color: '#fff',
  },
  '&:active': {