Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github issue template (#14) Sep 6, 2018
flow-typed
src Upgrade dependencies and fix flow (#19) Oct 2, 2018
.cuprc.js
.eslintrc.js
.flowconfig
.gitignore
Dockerfile
LICENSE
README.md
docker-compose.yml
package.json
renovate.json
yarn.lock

README.md

fusion-plugin-material-ui

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


Table of contents


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;
};
You can’t perform that action at this time.