Upgrade to MUI 9

Author: PeterTYLiu

package-lock.json

@@ -13,7 +13,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
+    "@mui/material": "^9.0.0",
     "@mui/x-charts": "^8.27.5",
     "@types/gtag.js": "^0.0.20",
     "@uiw/react-color": "^2.9.6",

package.json

@@ -87,8 +87,8 @@ export const BottomControls = () => {
   const hasEditedTheme = Object.keys(themeOptions).length !== 0;
 
   return (
-    <Stack gap={2} sx={{ p: { xs: 2, sm: 3, md: 4 }, pt: { xs: 0, sm: 0, md: 0 } }} alignItems="center">
-      <Stack gap={1} direction="row" sx={{ alignItems: "center" }}>
+    <Stack sx={{ gap: 2, alignItems: "center", p: { xs: 2, sm: 3, md: 4 }, pt: { xs: 0, sm: 0, md: 0 } }}>
+      <Stack direction="row" sx={{ gap: 2, alignItems: "center" }}>
         <Box
           sx={{
             backgroundImage: "conic-gradient(#ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",

src/components/BottomControls/BottomControls.tsx

@@ -27,9 +27,9 @@ export const EditorPanel = () => {
         >
           {BUTTON_DATA.map(({ name, icon }) => (
             <Button key={name} variant={section === name ? "contained" : "outlined"} onClick={() => setSection(name)} sx={{ py: 1 }}>
-              <Stack alignItems="center" gap={1}>
+              <Stack sx={{ gap: 1, alignItems: "center" }}>
                 {icon}
-                <Stack height={24} sx={{ placeContent: "center" }}>
+                <Stack sx={{ placeContent: "center", height: 24 }}>
                   <Typography
                     sx={{
                       lineHeight: "1",

src/components/EditorPanel/EditorPanel.tsx

@@ -29,7 +29,7 @@ export const FieldContainer = ({ title, children, isDefault, onReset, titleSx }:
             marginInlineEnd: 2,
           }}
         >
-          <Typography textTransform="capitalize" variant="subtitle2" color="textSecondary" sx={titleSx}>
+          <Typography variant="subtitle2" color="textSecondary" sx={{ textTransform: "capitalize", ...titleSx }}>
             {title}
           </Typography>
         </Box>

src/components/FieldContainer/FieldContainer.tsx

@@ -20,7 +20,7 @@ export const InfoPanel = () => {
       <Stack>
         <Typography variant="h5">MUI&nbsp;Theme&nbsp;Builder</Typography>
         <Typography variant="subtitle2" color="text.secondary">
-          Compatible with MUI 5 to 7
+          Compatible with MUI 5 to 9
         </Typography>
       </Stack>
       <svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">

src/components/InfoPanel/InfoPanel.tsx

@@ -199,7 +199,7 @@ export const MockApp = () => {
           <Typography color="text.primary" variant="h6">
             Tuesday, October 18
           </Typography>
-          <Stack direction="row" gap={1}>
+          <Stack direction="row" sx={{ gap: 1 }}>
             <Button variant="outlined" startIcon={<Upgrade />} onClick={() => setIsDialogOpen(true)} className="dialog-override">
               Export...
             </Button>
@@ -251,7 +251,7 @@ export const MockApp = () => {
                         </Link>
                       </StyledTableBodyCell>
                       <StyledTableBodyCell>
-                        <Stack direction="row" gap={1} alignItems="center">
+                        <Stack direction="row" sx={{ gap: 1, alignItems: "center" }}>
                           <Avatar
                             sx={{
                               width: 24,
@@ -283,8 +283,8 @@ export const MockApp = () => {
             <TablePagination component="div" count={6} page={0} onPageChange={() => {}} rowsPerPage={10} />
           </Paper>
           <Paper sx={{ p: 2, flex: "1 1 250px" }} className="paper-override">
-            <Stack direction="row" justifyContent="space-between" alignItems="center" gap={2} mb={1.5}>
-              <Typography fontWeight="bold">Analytics</Typography>
+            <Stack direction="row" sx={{ justifyContent: "space-between", alignItems: "center", gap: 2, mb: 1.5 }}>
+              <Typography sx={{ fontWeight: "bold" }}>Analytics</Typography>
               <Select size="small" value={15} className="select-override">
                 <MenuItem value={10}>Today</MenuItem>
                 <MenuItem value={15}>This Week</MenuItem>
@@ -319,7 +319,7 @@ export const MockApp = () => {
             </Stack>
 
             <Divider />
-            <Stack pt={1.5} gap={2}>
+            <Stack sx={{ pt: 1.5, gap: 2 }}>
               <Sparkline title="Tracking events" data={FAKE_DATA_1} icon={<TrackChanges fontSize="small" />} />
               <Sparkline title="Retention rate" data={FAKE_DATA_2} icon={<GasMeterRounded fontSize="small" />} />
               <Sparkline title="Customer TTRs" data={FAKE_DATA_3} icon={<AcUnitSharp fontSize="small" />} />