gatsby-plugin-material-ui

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

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.

// 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.

// gatsby-config.js

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

// 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.