Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags
Go to file
Cannot retrieve contributors at this time


Build status

The Fusion plugin for Styletron, a component-oriented styling toolkit based on style objects. This plugin automatically sets up server-side rendering and provides an atomic CSS rendering engine to your styled components.


yarn add fusion-plugin-styletron-react styletron-react


Plugin registration

// src/main.js
import App from 'fusion-react';
import Styletron from 'fusion-plugin-styletron-react';

import root from './components/root';

export default () => {
  const app = new App(root);


  return app;

Atomic class prefix

By default, it is assumed there is no global CSS that will result in collisions with the generated atomic class names. If this is not the case, collisions can be avoided by adding a prefix to the generated atomic class names via AtomicPrefixToken.

import Styletron, {AtomicPrefixToken} from 'fusion-plugin-styletron-react';

app.register(AtomicPrefixToken, "_");

Creating styled components

For API details and usage examples, see the official styletron-react documentation

// src/components/root.js
import react from 'react';
import {styled} from 'fusion-plugin-styletron-react';

const Panel = styled('div', props => {
  return {
    backgroundColor: props.$color || 'Silver'

export default <Panel color="SteelBlue">Hello</Panel>;