@wapps/gatsby-plugin-material-ui

A Gatsby plugin for Material UI with built-in server-side rendering support.

Install

npm install --save @wapps/gatsby-plugin-material-ui @material-ui/core

How to use

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@wapps/gatsby-plugin-material-ui`,
      options: {
        // Add any options here
      },
    },
  ],
}

Options

You can pass options to the plugin:

• theme (Object [optional]): Default to {}.
• dangerouslyUseGlobalCSS (Boolean [optional]): Defaults to false. Makes the Material-UI class names deterministic.
• productionPrefix (String [optional]): Defaults to 'jss'. The string used to prefix the class names in production.

For example:

options: {
  theme: {
    primaryColor: '#9c27b0',
  },
  productionPrefix: 'c',
}

Notes

This plugin is compatible with other CSS-in-JS solutions out of the box. To prevent unintentional style clobbering, it uses a custom jss instance to ensure that default Material-UI styles are injected before those generated by your styling library of choice. Read more about this strategy at the Material-UI docs.