muy
Build websites & apps with Gatsby & Material UI. Pronounced /ˈɛmˈjuːˈwaɪ/
Install
npm install muy @material-ui/core
Add support to server-side rendering
On your Terminal, run:
npm install gatsby-plugin-material-ui @material-ui/styles
Add the following to your gatsby-config.js
file:
moduleexports = plugins: resolve: 'gatsby-plugin-material-ui'
The default options should be enough to cover the most common use cases.
For custom and advanced examples, please check gatsby-plugin-material-ui on Gatsby
Usage
Importing/requiring components
ES6 way
import React from 'react'import H1 from 'muy' // ... const YourComponent = <H1 />
RequireJS way
const React = const H1 = // ... const YourComponent = <H1 />
Customizing Markdown & MDX Components
With useMDXComponents()
, you can replace every HTML element that Markdown renders with Muy and Material UI implementation.
import React from "react"import MDXProvider from "@mdx-js/react"import useMDXComponents from "muy" { const components = return <MDXProvider => children </MDXProvider> }
Don't forget to install all dependencies:
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
And update your gatsby-config.js
to use gatsby-plugin-mdx
:
moduleexports = plugins: resolve: 'gatsby-plugin-mdx'
For more info, check Getting Started with MDX on Gatsby website