# gatsby-plugin-material-ui

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

Latest version **4.1.0** (published 2021-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-material-ui
pnpm add gatsby-plugin-material-ui
yarn add gatsby-plugin-material-ui
bun add gatsby-plugin-material-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2021-11-16 |
| First published | 2017-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 134 |
| Maintainers | oliviertassinari, porteta, hupe1980 |
| Keywords | react, gatsby, gatsby-plugin, material-ui, emotion |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-material-ui
- Repository: https://github.com/hupe1980/gatsby-plugin-material-ui
- Homepage: https://github.com/hupe1980/gatsby-plugin-material-ui#readme
- Issues: https://github.com/hupe1980/gatsby-plugin-material-ui/issues
- npm.io page: https://npm.io/package/gatsby-plugin-material-ui

## Dependencies (2)

- [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.4.0
- [@emotion/server](https://npm.io/package/@emotion/server.md) ^11.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2021-11-16
- 4.0.2 (next) — 2021-08-14
- 4.0.3 — 2021-09-19
- 4.0.1 — 2021-08-11
- 3.0.1 — 2021-04-08
- 3.0.0 — 2021-03-29
- 2.1.10 — 2020-07-28
- 2.1.9 — 2020-05-27
- 2.1.8 — 2020-04-25
- 2.1.7 — 2020-04-24
- 2.1.6 — 2019-08-24
- 2.1.5 — 2019-08-04
- 2.1.4 — 2019-07-02
- 2.1.3 — 2019-06-30
- 2.1.2 — 2019-06-28
- … 19 more at https://npm.io/package/gatsby-plugin-material-ui/versions

## README

# gatsby-plugin-material-ui

> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui](https://github.com/mui-org/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](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1).

## Install
```sh
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.

```js
// 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](https://emotion.sh/docs/@emotion/cache#createcache).

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToEmotionCacheProps: `src/emotion-cache-props`,
      },
    },
  ],
};
```

```js
// 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](https://github.com/mui-org/material-ui/tree/master/examples/gatsby), then you can pick one of the [Page Layout Examples](https://material-ui.com/getting-started/page-layout-examples/).

If you want to save time with a more opinionated solution. You can start with [a premade theme](https://github.com/hupe1980/gatsby-theme-material-ui).

---
_Source: https://npm.io/package/gatsby-plugin-material-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._