[docs] Migrate Bottom Navigation demos to emotion

docs/src/pages/components/bottom-navigation/FixedBottomNavigation.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
@@ -14,18 +14,6 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles({
-  root: {
-    paddingBottom: 56,
-  },
-  bottomNav: {
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
 function refreshMessages() {
   const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
 
@@ -35,7 +23,6 @@ function refreshMessages() {
 }
 
 export default function FixedBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(0);
   const ref = React.useRef(null);
   const [messages, setMessages] = React.useState(() => refreshMessages());
@@ -46,7 +33,7 @@ export default function FixedBottomNavigation() {
   }, [value, setMessages]);
 
   return (
-    <div className={classes.root} ref={ref}>
+    <Box sx={{ pb: 7 }} ref={ref}>
       <CssBaseline />
       <List>
         {messages.map(({ primary, secondary, person }, index) => (
@@ -58,7 +45,7 @@ export default function FixedBottomNavigation() {
           </ListItem>
         ))}
       </List>
-      <Paper elevation={3} className={classes.bottomNav}>
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
         <BottomNavigation
           showLabels
           value={value}
@@ -71,7 +58,7 @@ export default function FixedBottomNavigation() {
           <BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />
         </BottomNavigation>
       </Paper>
-    </div>
+    </Box>
   );
 }
 

docs/src/pages/components/bottom-navigation/FixedBottomNavigation.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
@@ -14,18 +14,6 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles({
-  root: {
-    paddingBottom: 56,
-  },
-  bottomNav: {
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
 function refreshMessages(): MessageExample[] {
   const getRandomInt = (max: number) => Math.floor(Math.random() * Math.floor(max));
 
@@ -35,7 +23,6 @@ function refreshMessages(): MessageExample[] {
 }
 
 export default function FixedBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(0);
   const ref = React.useRef<HTMLDivElement>(null);
   const [messages, setMessages] = React.useState(() => refreshMessages());
@@ -46,7 +33,7 @@ export default function FixedBottomNavigation() {
   }, [value, setMessages]);
 
   return (
-    <div className={classes.root} ref={ref}>
+    <Box sx={{ pb: 7 }} ref={ref}>
       <CssBaseline />
       <List>
         {messages.map(({ primary, secondary, person }, index) => (
@@ -58,7 +45,7 @@ export default function FixedBottomNavigation() {
           </ListItem>
         ))}
       </List>
-      <Paper elevation={3} className={classes.bottomNav}>
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
         <BottomNavigation
           showLabels
           value={value}
@@ -71,7 +58,7 @@ export default function FixedBottomNavigation() {
           <BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />
         </BottomNavigation>
       </Paper>
-    </div>
+    </Box>
   );
 }
 

docs/src/pages/components/bottom-navigation/LabelBottomNavigation.js

@@ -1,28 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import FolderIcon from '@material-ui/icons/Folder';
 import RestoreIcon from '@material-ui/icons/Restore';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function LabelBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState('recents');
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
   return (
-    <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
+    <BottomNavigation sx={{ width: 500 }} value={value} onChange={handleChange}>
       <BottomNavigationAction
         label="Recents"
         value="recents"

docs/src/pages/components/bottom-navigation/LabelBottomNavigation.tsx

@@ -1,28 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import FolderIcon from '@material-ui/icons/Folder';
 import RestoreIcon from '@material-ui/icons/Restore';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function LabelBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState('recents');
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
   return (
-    <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
+    <BottomNavigation sx={{ width: 500 }} value={value} onChange={handleChange}>
       <BottomNavigationAction
         label="Recents"
         value="recents"

docs/src/pages/components/bottom-navigation/SimpleBottomNavigation.js

@@ -1,23 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import RestoreIcon from '@material-ui/icons/Restore';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function SimpleBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(0);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: 500 }}>
       <BottomNavigation
         showLabels
         value={value}
@@ -29,6 +22,6 @@ export default function SimpleBottomNavigation() {
         <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
         <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
       </BottomNavigation>
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/bottom-navigation/SimpleBottomNavigation.tsx

@@ -1,23 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import RestoreIcon from '@material-ui/icons/Restore';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function SimpleBottomNavigation() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(0);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: 500 }}>
       <BottomNavigation
         showLabels
         value={value}
@@ -29,6 +22,6 @@ export default function SimpleBottomNavigation() {
         <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
         <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
       </BottomNavigation>
-    </div>
+    </Box>
   );
 }