fusion-plugin-material-ui

1.0.2 • Public • Published

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.2
    13
    • latest

Version History

Package Sidebar

Install

npm i fusion-plugin-material-ui

Weekly Downloads

13

Version

1.0.2

License

MIT

Unpacked Size

179 kB

Total Files

49

Last publish

Collaborators

  • icculusc