Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

fusionjs/fusion-plugin-styletron-react

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

fusion-plugin-styletron-react

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.


Installation

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

Usage

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);

  app.register(Styletron);

  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(Styletron);
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>;