hupe1980 · hupe1980 · Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -2,7 +2,6 @@
 /coverage
 /e2e-tests/**/public/
 /examples/**/public/
-www/public
 
 /packages/**/lib/
 

diff --git a/.github/stale.yml b/.github/stale.yml
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -3,7 +3,7 @@
   "version": "4.13.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@mui/material": "^5.0.3",
     "gatsby": "^3.2.1",
     "gatsby-theme-material-ui": "^4.13.0",
     "react": "^17.0.2",

diff --git a/examples/simple/src/components/pro-tip.js b/examples/simple/src/components/pro-tip.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { makeStyles, SvgIcon, Typography } from '@material-ui/core';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
 
 function LightBulbIcon(props) {
   return (
@@ -10,24 +11,13 @@ function LightBulbIcon(props) {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: `middle`,
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
       Pro tip: See more{` `}
-      <Link href="https://next.material-ui.com/getting-started/page-layout-examples/">
-        page layout examples
+      <Link href="https://material-ui.com/getting-started/templates/">
+        templates
       </Link>
       {` `}
       on the Material-UI documentation.

diff --git a/examples/simple/src/gatsby-theme-material-ui-top-layout/theme.js b/examples/simple/src/gatsby-theme-material-ui-top-layout/theme.js
@@ -1,4 +1,4 @@
-import { createTheme, colors } from '@material-ui/core';
+import { createTheme, colors } from '@mui/material';
 
 // A custom theme for this app
 const theme = createTheme({

diff --git a/examples/simple/src/pages/about.js b/examples/simple/src/pages/about.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Container, Box, Typography } from '@material-ui/core';
+import { Container, Box, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 

diff --git a/examples/simple/src/pages/index.js b/examples/simple/src/pages/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Container, Box, Typography } from '@material-ui/core';
+import { Container, Box, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 

diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -3,7 +3,7 @@
   "version": "4.13.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "4.12.3",
+    "@mui/material": "^5.0.3",
     "gatsby": "^3.2.1",
     "gatsby-plugin-typescript": "^3.2.0",
     "gatsby-theme-material-ui": "^4.13.0",

diff --git a/examples/typescript/src/components/pro-tip.tsx b/examples/typescript/src/components/pro-tip.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-import Typography from '@material-ui/core/Typography';
 import { Link } from 'gatsby-theme-material-ui';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
 
 function LightBulbIcon(props: SvgIconProps) {
   return (
@@ -12,26 +11,13 @@ function LightBulbIcon(props: SvgIconProps) {
   );
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      margin: theme.spacing(6, 0, 3),
-    },
-    lightBulb: {
-      verticalAlign: `middle`,
-      marginRight: theme.spacing(1),
-    },
-  }),
-);
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
       Pro tip: See more{` `}
-      <Link href="https://next.material-ui.com/getting-started/page-layout-examples/">
-        page layout examples
+      <Link href="https://material-ui.com/getting-started/templates/">
+        templates
       </Link>
       {` `}
       on the Material-UI documentation.

diff --git a/examples/typescript/src/gatsby-theme-material-ui-top-layout/theme.tsx b/examples/typescript/src/gatsby-theme-material-ui-top-layout/theme.tsx
@@ -1,5 +1,5 @@
-import red from '@material-ui/core/colors/red';
-import { createTheme } from '@material-ui/core';
+import red from '@mui/material/colors/red';
+import { createTheme } from '@mui/material';
 
 // A custom theme for this app
 const theme = createTheme({

diff --git a/examples/typescript/src/pages/about.tsx b/examples/typescript/src/pages/about.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Container, Box, Typography } from '@material-ui/core';
+import { Container, Box, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 

diff --git a/examples/typescript/src/pages/index.tsx b/examples/typescript/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Container, Box, Typography } from '@material-ui/core';
+import { Container, Box, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 

diff --git a/examples/using-redux/package.json b/examples/using-redux/package.json
@@ -3,7 +3,7 @@
   "version": "4.13.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@mui/material": "^5.0.3",
     "gatsby": "^3.2.1",
     "gatsby-theme-material-ui": "^4.13.0",
     "react": "^17.0.2",

diff --git a/examples/using-redux/src/components/counter.js b/examples/using-redux/src/components/counter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Box, Button, Typography } from '@material-ui/core';
+import { Box, Button, Typography } from '@mui/material';
 
 function Counter({ count, increment }) {
   return (

diff --git a/examples/using-redux/src/components/pro-tip.js b/examples/using-redux/src/components/pro-tip.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { makeStyles, SvgIcon, Typography } from '@material-ui/core';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
 
 function LightBulbIcon(props) {
   return (
@@ -10,24 +11,13 @@ function LightBulbIcon(props) {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: `middle`,
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
       Pro tip: See more{` `}
-      <Link href="https://next.material-ui.com/getting-started/page-layout-examples/">
-        page layout examples
+      <Link href="https://material-ui.com/getting-started/templates/">
+        templates
       </Link>
       {` `}
       on the Material-UI documentation.

diff --git a/examples/using-redux/src/gatsby-theme-material-ui-top-layout/theme.js b/examples/using-redux/src/gatsby-theme-material-ui-top-layout/theme.js
@@ -1,4 +1,4 @@
-import { createTheme, colors } from '@material-ui/core';
+import { createTheme, colors } from '@mui/material';
 
 // A custom theme for this app
 const theme = createTheme({

diff --git a/examples/using-redux/src/pages/about.js b/examples/using-redux/src/pages/about.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Box, Container, Typography } from '@material-ui/core';
+import { Box, Container, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 

diff --git a/examples/using-redux/src/pages/index.js b/examples/using-redux/src/pages/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby-theme-material-ui';
-import { Box, Container, Typography } from '@material-ui/core';
+import { Box, Container, Typography } from '@mui/material';
 
 import ProTip from '../components/pro-tip';
 import Counter from '../components/counter';

diff --git a/package.json b/package.json
@@ -6,11 +6,9 @@
     "start:simple": "yarn workspace example-simple start",
     "start:typescript": "yarn workspace example-typescript start",
     "start:using-redux": "yarn workspace example-using-redux start",
-    "start:www": "yarn workspace www start",
     "build:simple": "yarn workspace example-simple build",
     "build:typescript": "yarn workspace example-typescript build",
     "build:using-redux": "yarn workspace example-using-redux build",
-    "build:www": "yarn workspace www build",
     "prepare": "lerna run prepare",
     "outdated:all": "yarn outdated",
     "upgrade:all": "yarn upgrade-interactive --latest",
@@ -20,8 +18,7 @@
   },
   "workspaces": [
     "packages/*",
-    "examples/*",
-    "www"
+    "examples/*"
   ],
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.21.0",
@@ -38,6 +35,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "lerna": "^4.0.0",
     "prettier": "^2.2.1"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/gatsby-material-ui-components/README.md b/packages/gatsby-material-ui-components/README.md
@@ -8,17 +8,17 @@ The components are part of the [gatsby-theme-material-ui](https://github.com/hup
 
 ```sh
 // with npm
-npm install gatsby-material-ui-components @material-ui/core
+npm install gatsby-material-ui-components @mui/material
 
 // with yarn
-yarn add gatsby-material-ui-components @material-ui/core
+yarn add gatsby-material-ui-components @mui/material
 ```
 
 ## How to use
 
 ```javascript
 import React from "react";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 //import { Link } from "gatsby"
 import { Link } from "gatsby-material-ui-components";
 

diff --git a/packages/gatsby-material-ui-components/package.json b/packages/gatsby-material-ui-components/package.json
@@ -21,12 +21,16 @@
     "prepare": "npm run build"
   },
   "peerDependencies": {
-    "@material-ui/core": ">=4.0.0",
+    "@mui/material": ">5.0.0",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "gatsby": "^3.0.0",
     "react": ">=16.8.6 || >=17.0.0"
   },
   "devDependencies": {
-    "@material-ui/core": "4.12.3",
+    "@mui/material": "^5.0.3",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/react-hooks": "^5.1.1",
     "@types/jest": "^26.0.7",

diff --git a/packages/gatsby-material-ui-components/src/__tests__/__snapshots__/button.test.tsx.snap b/packages/gatsby-material-ui-components/src/__tests__/__snapshots__/button.test.tsx.snap
@@ -3,15 +3,12 @@
 exports[`button button with ref 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-text"
+    class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1e6y48t-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     <span
-      class="MuiButton-label"
-    />
-    <span
-      class="MuiTouchRipple-root"
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
 </DocumentFragment>
@@ -20,17 +17,12 @@ exports[`button button with ref 1`] = `
 exports[`button lbutton with to 1`] = `
 <DocumentFragment>
   <a
-    aria-disabled="false"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text"
+    class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1e6y48t-MuiButtonBase-root-MuiButton-root"
     href="/page2"
-    role="button"
     tabindex="0"
   >
     <span
-      class="MuiButton-label"
-    />
-    <span
-      class="MuiTouchRipple-root"
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </a>
 </DocumentFragment>
@@ -39,15 +31,12 @@ exports[`button lbutton with to 1`] = `
 exports[`button should be rendered correctly 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-text"
+    class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1e6y48t-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     <span
-      class="MuiButton-label"
-    />
-    <span
-      class="MuiTouchRipple-root"
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
 </DocumentFragment>