[docs] Migrate Menu demos to emotion

docs/src/pages/components/menus/CustomizedMenus.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles, alpha } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -10,8 +10,22 @@ import FileCopyIcon from '@material-ui/icons/FileCopy';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
-const StyledMenu = withStyles((theme) => ({
-  paper: {
+const StyledMenu = styled((props) => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }) => ({
+  '& .MuiPaper-root': {
     borderRadius: 6,
     marginTop: theme.spacing(1),
     minWidth: 180,
@@ -37,21 +51,7 @@ const StyledMenu = withStyles((theme) => ({
       },
     },
   },
-}))((props) => (
-  <Menu
-    elevation={0}
-    getContentAnchorEl={null}
-    anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'right',
-    }}
-    transformOrigin={{
-      vertical: 'top',
-      horizontal: 'right',
-    }}
-    {...props}
-  />
-));
+}));
 
 export default function CustomizedMenus() {
   const [anchorEl, setAnchorEl] = React.useState(null);

docs/src/pages/components/menus/CustomizedMenus.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles, createStyles, alpha } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Menu, { MenuProps } from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -9,37 +9,9 @@ import ArchiveIcon from '@material-ui/icons/Archive';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import * as CSS from 'csstype';
 
-const StyledMenu = withStyles((theme) =>
-  createStyles({
-    paper: {
-      borderRadius: 6,
-      marginTop: theme.spacing(1),
-      minWidth: 180,
-      color:
-        theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
-      boxShadow:
-        'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
-      '& .MuiList-root': {
-        padding: '4px 0',
-      },
-      '& .MuiListItem-root': {
-        ...theme.typography.body1,
-        '& .MuiSvgIcon-root': {
-          fontSize: 18,
-          color: theme.palette.text.secondary,
-          marginRight: theme.spacing(1.5),
-        },
-        '&:active': {
-          backgroundColor: alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity,
-          ),
-        },
-      },
-    },
-  }),
-)((props: MenuProps) => (
+const StyledMenu = styled((props: MenuProps) => (
   <Menu
     elevation={0}
     getContentAnchorEl={null}
@@ -53,7 +25,34 @@ const StyledMenu = withStyles((theme) =>
     }}
     {...props}
   />
-));
+))(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 6,
+    marginTop: theme.spacing(1),
+    minWidth: 180,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiList-root': {
+      padding: '4px 0',
+    },
+    '& .MuiListItem-root': {
+      ...(theme.typography.body1 as CSS.Properties),
+      '& .MuiSvgIcon-root': {
+        fontSize: 18,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(1.5),
+      },
+      '&:active': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity,
+        ),
+      },
+    },
+  },
+}));
 
 export default function CustomizedMenus() {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

docs/src/pages/components/menus/SimpleListMenu.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -31,8 +30,12 @@ export default function SimpleListMenu() {
   };
 
   return (
-    <Box sx={{ bgcolor: 'background.paper' }}>
-      <List component="nav" aria-label="Device settings">
+    <div>
+      <List
+        component="nav"
+        aria-label="Device settings"
+        sx={{ bgcolor: 'background.paper' }}
+      >
         <ListItem
           button
           id="lock-button"
@@ -69,6 +72,6 @@ export default function SimpleListMenu() {
           </MenuItem>
         ))}
       </Menu>
-    </Box>
+    </div>
   );
 }

docs/src/pages/components/menus/SimpleListMenu.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -34,8 +33,12 @@ export default function SimpleListMenu() {
   };
 
   return (
-    <Box sx={{ bgcolor: 'background.paper' }}>
-      <List component="nav" aria-label="Device settings">
+    <div>
+      <List
+        component="nav"
+        aria-label="Device settings"
+        sx={{ bgcolor: 'background.paper' }}
+      >
         <ListItem
           button
           id="lock-button"
@@ -72,6 +75,6 @@ export default function SimpleListMenu() {
           </MenuItem>
         ))}
       </Menu>
-    </Box>
+    </div>
   );
 }