Community Plugin
View plugin on GitHubgatsby-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.