gatsby-plugin-material-ui
Version:
Gatsby plugin for Material-UI with built-in server-side rendering support
113 lines (83 loc) • 3.07 kB
Markdown
# gatsby-plugin-material-ui
> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui/styles](https://github.com/mui-org/material-ui) with built-in server-side rendering support.
This is the plugin for Material-UI v4.
The plugin for v3 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v1.2.5).
## Install
```sh
npm install gatsby-plugin-material-ui @material-ui/styles
```
## 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`],
};
```
## 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`](https://material-ui.com/styles/api/#stylesprovider) component:
```js
// 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) |
```js
// 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`](https://material-ui.com/styles/api/#stylesprovider) component.
```js
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-material-ui`,
options: {
pathToStylesProvider: `src/styles-provider-props`,
},
},
],
};
```
```js
// 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 Material-UI side](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).