Migrate material-ui example away from deprecated @mui/styles dep

Author: tanem

examples/material-ui/package.json

@@ -10,7 +10,6 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@mui/material": "7.3.4",
-    "@mui/styles": "6.4.8",
     "@tanem/react-nprogress": "latest",
     "@types/jest": "30.0.0",
     "@types/node": "22.18.9",

examples/material-ui/src/Progress.tsx

@@ -1,33 +1,28 @@
 import Container from '@mui/material/Container'
 import LinearProgress from '@mui/material/LinearProgress'
-import { makeStyles, Theme } from '@mui/styles'
 import { useNProgress } from '@tanem/react-nprogress'
 import React from 'react'
 
-const useStyles = makeStyles<
-  Theme,
-  Pick<ReturnType<typeof useNProgress>, 'animationDuration' | 'isFinished'>
->({
-  bar: ({ animationDuration }) => ({
-    transitionDuration: `${animationDuration}ms`,
-  }),
-  container: ({ animationDuration, isFinished }) => ({
-    opacity: isFinished ? 0 : 1,
-    pointerEvents: 'none',
-    transition: `opacity ${animationDuration}ms linear`,
-  }),
-})
-
 const Progress: React.FC<{ isAnimating: boolean }> = ({ isAnimating }) => {
   const { animationDuration, isFinished, progress } = useNProgress({
     isAnimating,
   })
-  const classes = useStyles({ animationDuration, isFinished })
 
   return (
-    <Container classes={{ root: classes.container }} disableGutters={true}>
+    <Container
+      disableGutters={true}
+      sx={{
+        opacity: isFinished ? 0 : 1,
+        pointerEvents: 'none',
+        transition: `opacity ${animationDuration}ms linear`,
+      }}
+    >
       <LinearProgress
-        classes={{ bar1Determinate: classes.bar }}
+        sx={{
+          '& .MuiLinearProgress-bar1Determinate': {
+            transitionDuration: `${animationDuration}ms`,
+          },
+        }}
         value={progress * 100}
         variant="determinate"
       />

examples/material-ui/src/index.tsx

@@ -1,36 +1,35 @@
+import { GlobalStyles } from '@mui/material'
 import Button from '@mui/material/Button'
 import Container from '@mui/material/Container'
-import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { createRoot } from 'react-dom/client'
 
 import Progress from './Progress'
 
-const useStyles = makeStyles({
-  '@global': {
-    body: {
-      margin: 0,
-    },
-  },
-  container: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100vh',
-    justifyContent: 'center',
-  },
-})
-
 const App: React.FC = () => {
-  const classes = useStyles()
   const [state, setState] = useState({
     isAnimating: false,
     key: 0,
   })
 
   return (
     <>
+      <GlobalStyles
+        styles={{
+          body: {
+            margin: 0,
+          },
+        }}
+      />
       <Progress isAnimating={state.isAnimating} key={state.key} />
-      <Container classes={{ root: classes.container }}>
+      <Container
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100vh',
+          justifyContent: 'center',
+        }}
+      >
         <Button
           onClick={() => {
             setState((prevState) => ({