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

    Keywords

    none

    Install

    npm i fusion-plugin-material-ui

    DownloadsWeekly Downloads

    71

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    179 kB

    Total Files

    49

    Last publish

    Collaborators

    • icculusc