Styling components

It's possible to use any CSS framework or library with Fusion.js. Below we provide a guide for using Styletron, a high-performance atomic CSS library maintained by the Fusion.js team.

Custom styling

For custom styling, we recommend using Styletron (via fusion-plugin-styletron-react). Use Styletron to write styled components that get compiled to atomic CSS for maximum performance.

This plugin automatically sets up SSR, hydration, and context provider boilerplate and re-exports the styling functions from styletron-react so you can just focus on styling.

// Be sure to import HOCs from "fusion-plugin-styletron-react"
import {
} from 'fusion-plugin-styletron-react';

Note: Extra features such as LTR-to-RTL might be included in fusion-plugin-styletron-react, so it's best to use its exports instead of styletron-react directly.

To read more about Styletron, please refer to the official Styletron documentation.

3rd party stylesheets

To add 3rd party stylesheets to an app, use the fusion-plugin-react-helmet-async plugin.

import React from 'react';
import {Helmet} from 'fusion-plugin-react-helmet-async';

const Root = () => (
    <h1>Hello World</h1>