Community Plugin
View plugin on GitHub
See starters using this

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

If you’re already using @material-ui/core:

npm install gatsby-plugin-material-ui

If you’d only like to use Material-UI’s Styling Solution (without @material-ui/core):

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

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

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