Gatsby Material-UI Theme
The mui theme sets up the configuration based on the best practices recommended by the material-ui team.
- This takes care of all the setup and configuration requirements for theming, layouts, material-ui setup for SSR and client side rendering.
- An HOC sets up the material-ui theming both for SSR and Browser modes, so the user just needs to configure the material-ui theme configuration to customize it to the websites requirements.
How to use
- Add the dependency
@gatsby-themes/mui
- The mui theme will warn of the peer dependencies which also must be added to the gatsby site leveraging this theme.
- The dependencies include
- "@material-ui/core": "^4.2.0",
- "@material-ui/styles": "^4.2.0",
- "gatsby-plugin-material-ui": "^2.1.4",
yarn add `@gatsby-themes/mui`
- Configure the theme in the
gatsby-config.js
file.
module.exports = {
plugins: [
{
resolve: '@gatsby-themes/mui',
},
],
}
-
Customize / Setup your Material-UI theme
- Create a file under the src directory called `@gatsby-themes\mui\custom-theme.js` - See an example material-ui theme customization [in the demo-app workspace](https://github.com/ERS-HCL/gatsby-atomic-themes/blob/master/packages/demo-app/src/%40gatsby-themes/mui/custom-theme.js)