fix: more specific interfaces and index signatures

A more specific interface can't be assigned to a more generic
one if the generic one has an index signature. Workaround
used from microsoft/TypeScript#15300 (comment)

Author: eps1lon

docs/src/pages/components/drawers/ClippedDrawer.js

@@ -33,7 +33,7 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     padding: theme.spacing(3),
   },
-  toolbar: theme.mixins.toolbar,
+  toolbar: { ...theme.mixins.toolbar },
 }));
 
 export default function ClippedDrawer() {

docs/src/pages/components/drawers/ClippedDrawer.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       padding: theme.spacing(3),
     },
-    toolbar: theme.mixins.toolbar,
+    toolbar: { ...theme.mixins.toolbar },
   }),
 );
 

docs/src/pages/components/drawers/PermanentDrawerLeft.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
-  toolbar: theme.mixins.toolbar,
+  toolbar: { ...theme.mixins.toolbar },
   content: {
     flexGrow: 1,
     backgroundColor: theme.palette.background.default,

docs/src/pages/components/drawers/PermanentDrawerLeft.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
-    toolbar: theme.mixins.toolbar,
+    toolbar: { ...theme.mixins.toolbar },
     content: {
       flexGrow: 1,
       backgroundColor: theme.palette.background.default,

docs/src/pages/components/drawers/PermanentDrawerRight.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
-  toolbar: theme.mixins.toolbar,
+  toolbar: { ...theme.mixins.toolbar },
   content: {
     flexGrow: 1,
     backgroundColor: theme.palette.background.default,

docs/src/pages/components/drawers/PermanentDrawerRight.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
-    toolbar: theme.mixins.toolbar,
+    toolbar: { ...theme.mixins.toolbar },
     content: {
       flexGrow: 1,
       backgroundColor: theme.palette.background.default,

docs/src/pages/components/drawers/ResponsiveDrawer.js

@@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({
       display: 'none',
     },
   },
-  toolbar: theme.mixins.toolbar,
+  toolbar: { ...theme.mixins.toolbar },
   drawerPaper: {
     width: drawerWidth,
   },

docs/src/pages/components/drawers/ResponsiveDrawer.tsx

@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
         display: 'none',
       },
     },
-    toolbar: theme.mixins.toolbar,
+    toolbar: { ...theme.mixins.toolbar },
     drawerPaper: {
       width: drawerWidth,
     },