fusion-plugin-material-ui

This plugin will provide drop in support for "just works" server side rendering material-ui components.

---

Table of contents

• Installation
• Usage
• Setup
• API
  • Registration API
  • Dependencies
• Advanced Usage

---

Installation

yarn add fusion-plugin-material-ui

Usage

// ButtonWrap.js
import React from 'react';
import Button from '@material-ui/core/Button';

export ButtonWrap = () => (
  <Button
    variant="contained"
    color="primary"
  >
    with bacon
  </Button>
)

Setup

The Basic

// main.js
import React from 'react';
import App from 'fusion-react';

import MuiThemeProvider, {
  MuiThemeProviderToken,
} from 'fusion-plugin-material-ui';

export default () => {
  const app = new App(root);
  // will use the default theme
  app.register(MuiThemeProviderToken, MuiThemeProvider);
  return app;
};

Custom Theme

https://material-ui.com/customization/themes/

// main.js
import React from 'react';
import App from 'fusion-react';

import MuiThemeProvider, {
  MuiThemeProviderToken,
  MuiThemeToken,
} from 'fusion-plugin-material-ui';
import {createMuiTheme} from '@material-ui/core/styles';

export default () => {
  const app = new App(root);
  app.register(MuiThemeToken, createMuiTheme({fooColor: '#ba4'}));
  app.register(MuiThemeProviderToken, MuiThemeProvider);
  return app;
};

API

Registration API

MuiThemeProvider

import MuiThemeProvider from 'fusion-plugin-material-ui';

Adds the MuiThemeProvider from @material-ui/core and handles server side rendering. Typically registered with MuiThemeProviderToken

MuiThemeProviderToken

import {MuiThemeProviderToken} from 'fusion-plugin-material-ui';

Typicall registered with MuiThemeProvider

Dependencies

MuiThemeToken

import {MuiThemeToken} from 'fusion-plugin-material-ui';

Register with your own custom material-ui theme. Optional

JssToken

import {JssToken} from 'fusion-plugin-material-ui';

Register with your own custom jss instance. Optional  

 

 

 

 

Advanced Usage

Custom JSS instance

This requires management of a custom jss instance.

https://material-ui.com/customization/css-in-js/

// main.js
import React from 'react';
import App from 'fusion-react';

import {create} from 'jss';
import MuiThemeProvider, {
  JssToken,
  MuiThemeProviderToken,
} from 'fusion-plugin-material-ui';

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

  app.register(JssToken, create());
  app.register(MuiThemeProviderToken, MuiThemeProvider);
  return app;
};