gatsby-plugin-material-ui

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

This is the plugin for Material-UI v4. The plugin for v3 can be found here.

Install

npm install gatsby-plugin-material-ui @material-ui/styles

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`],
};

Usage with styled-components or else

If using Material-UI together with other styling providers (like styled-components), you should make sure Material-UI styles end up on top of <head> (so the other styling providers can overwrite it).

You can leverage the injectFirst: true prop the StylesProvider component:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    `gatsby-plugin-styled-components`,
  ],
};

Autoprefixing and minification

By default, the plugin adds vendor-specific prefixes and minimizes the server-side CSS. The following options are available for deactivating:

Option	Default	Description
disableAutoprefixing	false	Opt-out autoprefixing (autoprefixer)
disableMinification	false	Opt-out minification (clean-css)

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        disableAutoprefixing: false,
        disableMinification: false,
      },
    },
  ],
};

Advanced

You can use the pathToStylesProvider option instead of the stylesProvider one to provide rich object props to the StylesProvider component.

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToStylesProvider: `src/styles-provider-props`,
      },
    },
  ],
};

// src/styles-provider-props.js

import { jssPreset } from "@material-ui/styles";
import { create } from "jss";

const stylesProviderProps = {
  jss: create({ ...jssPreset(), insertionPoint: `mui-inject-first` }),
};

export default stylesProviderProps;

Examples

You can find an official integration example of this plugin on Material-UI side, 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.