How to use the emotion.hydrate function in emotion

// @flow

import React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import { hydrate } from "emotion";
import styled from "react-emotion";

// window._emotion is set inside html.js and caches emotion styles
if (typeof window !== "undefined" && window._emotion) {
  hydrate(window._emotion);
}

const Title = styled("h1")`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Title2 = styled("h1")`
  font-size: 2em;
  text-align: right;
  color: blue;
`;

export default createApp(() => (

import { hydrate } from 'emotion'
import { registerLanguage as registerHighlight } from 'react-syntax-highlighter/light'
import { registerLanguage as registerPrism } from 'react-syntax-highlighter/prism-light'
import { languages } from '@codegen/loadSyntax' // eslint-disable-line
import history from './history'
import App from './application'

const { _EMOTION_IDS_ } = window
const isDev = process.env.NODE_ENV === 'development'

// https://github.com/timberio/gitdocs/issues/114
// const render = isDev ? ReactDOM.render : ReactDOM.hydrate
const render = ReactDOM.render

isDev && module.hot && module.hot.accept()
_EMOTION_IDS_ && hydrate(_EMOTION_IDS_)

// Ensure required languages are registered
const renderers = {
  hljs: registerHighlight,
  prism: registerPrism,
}

if (window) {
  const register = renderers[process.env.PROPS.config.syntax.renderer]
  languages.forEach(lang => register(lang.name, lang.func))
}

render(
  
    
  ,

import {hydrate as emotionHydrate} from 'emotion';
import {Provider} from 'react-redux';

import ReactHotLoader from './ReactHotLoader';
import Root from './app/Root';
import history from './app/history';
import configureStore from '../../common/configureStore';
import '../css/index.scss';
import DevTools from '../../common/DevTools';


/** ******************
 *  Server hydration
 ******************* */
if (window.EMOTION_IDS) {
    emotionHydrate(window.EMOTION_IDS);
}

const {store} = configureStore(history, window.REDUX_STATE);

FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const root = document.getElementById('root');
const devTools = document.getElementById('devTools');

const renderApp = (RootElement) => {
    const app = (

import ReactHotLoader from './app/ReactHotLoader';
import Root from './app/Root';
import history from './app/history';
import configureStore from '../../common/configureStore';
import '../css/index.scss';

// setup grpc config
import {setup} from './grpc/init';
setup();

/** ******************
 *  Server hydration
 ******************* */
if (window.EMOTION_IDS) {
    emotionHydrate(window.EMOTION_IDS);
}

const {store} = configureStore(history, window.REDUX_STATE);

FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const root = document.getElementById('root');

const renderApp = (RootElement) => {
    const app = (

constructor(props: any) {
    super(props);
    // https://github.com/emotion-js/emotion/blob/108d78aa176aedfddc0854ebe4049847a9ac2a9b/docs/ssr.md#hydrate
    if (typeof window !== "undefined") {
      hydrate(window.__NEXT_DATA__.ids);
    }
  }

import React from 'react'
import Router from 'next/router'
import Progress from 'nprogress'
import {Provider} from 'react-redux'
import {hydrate, injectGlobal} from 'emotion'
import {ThemeProvider} from 'theming'
import {lifecycle} from 'recompose'

import store from '../ducks'
import {font} from '../core/style'

const theme = {}

if (typeof window !== 'undefined') {
  hydrate(window.__NEXT_DATA__.ids)

  Router.onRouteChangeStart = () => Progress.start()
  Router.onRouteChangeComplete = () => Progress.done()
  Router.onRouteChangeError = () => Progress.done()
}

const enhance = lifecycle({
  componentWillMount() {
    /* eslint no-unused-expressions: 0 */

    injectGlobal`
      body {
        margin: 0;
        font-family: ${font};
        font-weight: 300;
      }

import initClient from "@treats/client";
import { hydrate } from "emotion";

hydrate(window.__EMOTION_IDS);

const app = initClient();

export default app;

export const onClientEntry = () => {
  if (
    typeof window !== `undefined` &&
    typeof window.__EMOTION_CRITICAL_CSS_IDS__ !== `undefined`
  ) {
    hydrate(window.__EMOTION_CRITICAL_CSS_IDS__);
  }
};

const hydrateByEmotion = (html) => {
  const { hydrate } = require('emotion');
  const { extractCritical } = require('emotion-server');
  const { ids } = extractCritical(html);
  hydrate(ids);
};

export default function mount() {
  if (sentryDsn) {
    const ravenConfig: Raven.RavenOptions = {
      environment: process.env.NODE_ENV,
      tags: {
        subject: 'frontend',
        commit: process.env.TRAVIS_COMMIT,
      },
    }
    Raven.config(sentryDsn, ravenConfig).install()
  }

  const ssr = (window as SSRWindow).ssr
  Emotion.hydrate(ssr.cssIds)
  ReactDOM.hydrate(
    
      
    ,
    document.getElementById('react-root'),
  )
}