gatsby-plugin-material-ui

> A Gatsby plugin for @material-ui with built-in server-side rendering support.

This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found here.

Install

``sh
npm install gatsby-plugin-material-ui@next @emotion/react
`

Theme vs. Plugin

- gatsby-plugin-material-ui solves FOUC, auto prefixing and minification.
- gatsby-theme-material-ui uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline and mui theme support and has material ui styled gatsby link components

How to use

The default options should be enough to cover the most common use cases.

`js
// gatsby-config.js

module.exports = {
plugins: [gatsby-plugin-material-ui],
};
`

Advanced

You can use the pathToEmotionCacheProps option for low level customization of how styles get inserted by emotion.

`js
// gatsby-config.js

module.exports = {
plugins: [
{
resolve: gatsby-plugin-material-ui,
options: {
pathToEmotionCacheProps: src/emotion-cache-props,
},
},
],
};
`

`js
// src/emotion-cache-props.js
const emotionCacheProps = {
key: xyz,
nonce: XXXYYYZZZ
};

export default emotionCacheProps;
``

Examples

You can find an official integration example of this plugin on the Material-UI site, then you can pick one of the Page Layout Examples.

If you want to save time with a more opinionated solution. You can start with a premade theme.