nextjs-mui-helper
Description
ONLY Support @material-ui/core. If you want to use material-ui@beta version, please use v0.2.8 instead.
nextjs-mui-helper is a package for making a project with nextjs and material-ui easier.
There are several steps to enable SSR in nextjs with material-ui which may be little bit confusing for beginners to implement.
This package wraps those steps and you can achieve the goal with only two
steps.
Installation
nextjs-mui-helper is available as an npm package.
npm install --save nextjs-mui-helper
Steps
- Create a _document.js under the pages folder.
import makeNextDocument from 'nextjs-mui-helper/nextjs/makeNextDocument'; ;
- Use hoc to inject material-ui to your page. Example: make a page1.js under pages folder.
import React from 'react';import withParts from 'nextjs-mui-helper/mui/withParts';import Button from 'material-ui/Button'; const Page1 = <Button ="primary"> Hello World </Button>; Page1;
That's it! Want to inject your own theme? See following instructions.
About step2, you also can create a _app.js under the pages folder.
import makeNextApp from 'nextjs-mui-helper/nextjs/makeNextApp'; ;
Instructions
- nextjs/makeNextDocument
No. | Parameter | Default | Description |
---|---|---|---|
1 | muiTheme | { palette: { primary: blue, secondary: pink, }, } |
material-ui's theme object |
- mui/withParts
No. | Parameter | Default | Description |
---|---|---|---|
1 | muiTheme | { palette: { primary: blue, secondary: pink, }, } |
material-ui's theme object |
2 | layout | null | Layout component(like <Layout>{childrend}</Layout>) |
3 | enable nprogress | false | enable progress bar made by nprogress |
4 | enable CssBaseline | true | enable material-ui's default CssBaseline |
- nextjs/makeNextApp
Same with withParts. But can be used to create a _app.js file.
Examples
You can find some examples under the ./example folder.
License
This project is licensed under the terms of the MIT license.