Application harness

Using components built with the Styletron Themer requires the instantiation of two providers around your application components.

The StyletronProvider is defined in the official styletron-react package. The ThemeProvider component is an essential part of the Styletron Themer package; see the ThemeProvider API docs for details and for a more full-featured example harness.

Wrapping order does not matter, as these provider components do not depend on each other.

import React from 'react';
import {render} from 'react-dom';
import Styletron from 'styletron-client';
import {StyletronProvider} from 'styletron-react';
import {ThemeProvider} from 'styletron-themer';

const ourTheme = {/* ... details elsewhere ... */};

render(
  <StyletronProvider styletron={new Styletron()}>
    <ThemeProvider theme={ourTheme}>
      {/* your app code here */}
    </ThemeProvider>
  </StyletronProvider>
, document.getElementById('app'));