https://github.com/icculusc/fusion-plugin-material-ui
material-ui support for https://fusionjs.com
https://github.com/icculusc/fusion-plugin-material-ui
Last synced: 9 months ago
JSON representation
material-ui support for https://fusionjs.com
- Host: GitHub
- URL: https://github.com/icculusc/fusion-plugin-material-ui
- Owner: IcculusC
- License: mit
- Created: 2018-08-22T19:12:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:51:28.000Z (over 3 years ago)
- Last Synced: 2024-12-22T00:50:34.875Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/fusion-plugin-material-ui
- Size: 1.05 MB
- Stars: 7
- Watchers: 3
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fusion-plugin-material-ui
This plugin will provide drop in support for "just works" server side rendering [`material-ui`](https://material-ui.com/) components.
---
### Table of contents
* [Installation](#installation)
* [Usage](#usage)
* [Setup](#setup)
* [API](#api)
* [Registration API](#registration-api)
* [Dependencies](#dependencies)
* [Advanced Usage](#advancedusage)
---
### Installation
```js
yarn add fusion-plugin-material-ui
```
### Usage
```js
// ButtonWrap.js
import React from 'react';
import Button from '@material-ui/core/Button';
export ButtonWrap = () => (
with bacon
)
```
### Setup
#### The Basic
```js
// 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/](https://material-ui.com/customization/themes/)
```js
// 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`
```js
import MuiThemeProvider from 'fusion-plugin-material-ui';
```
Adds the `MuiThemeProvider` from `@material-ui/core` and handles server side rendering. Typically registered with [`MuiThemeProviderToken`](#muithemeprovidertoken)
##### `MuiThemeProviderToken`
```js
import {MuiThemeProviderToken} from 'fusion-plugin-material-ui';
```
Typicall registered with [`MuiThemeProvider`](#muithemeprovider)
#### Dependencies
##### `MuiThemeToken`
```js
import {MuiThemeToken} from 'fusion-plugin-material-ui';
```
Register with your own custom `material-ui` theme.
Optional
##### `JssToken`
```js
import {JssToken} from 'fusion-plugin-material-ui';
```
Register with your own custom [`jss`](https://cssinjs.org) instance.
Optional
### Advanced Usage
#### Custom JSS instance
This requires management of a custom [`jss`](https://cssinjs.org) instance.
[https://material-ui.com/customization/css-in-js/](https://material-ui.com/customization/css-in-js/)
```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;
};
```