gatsby-plugin-material-ui

    4.1.0 • Public • Published

    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.

    Install

    npm i gatsby-plugin-material-ui

    DownloadsWeekly Downloads

    19,909

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    9.86 kB

    Total Files

    8

    Last publish

    Collaborators

    • oliviertassinari
    • porteta
    • hupe1980