[docs] Migrate AppBar demos to emotion

docs/src/pages/components/app-bar/BackToTop.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Box from '@material-ui/core/Box';
@@ -12,17 +11,8 @@ import Fab from '@material-ui/core/Fab';
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import Zoom from '@material-ui/core/Zoom';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'fixed',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}));
-
 function ScrollTop(props) {
   const { children, window } = props;
-  const classes = useStyles();
   // Note that you normally won't need to set the window ref as useScrollTrigger
   // will default to window.
   // This is only being set here because the demo is in an iframe.
@@ -47,9 +37,13 @@ function ScrollTop(props) {
 
   return (
     <Zoom in={trigger}>
-      <div onClick={handleClick} role="presentation" className={classes.root}>
+      <Box
+        onClick={handleClick}
+        role="presentation"
+        sx={{ position: 'fixed', bottom: 2, right: 2 }}
+      >
         {children}
-      </div>
+      </Box>
     </Zoom>
   );
 }

docs/src/pages/components/app-bar/BackToTop.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Box from '@material-ui/core/Box';
@@ -20,19 +19,8 @@ interface Props {
   children: React.ReactElement;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'fixed',
-      bottom: theme.spacing(2),
-      right: theme.spacing(2),
-    },
-  }),
-);
-
 function ScrollTop(props: Props) {
   const { children, window } = props;
-  const classes = useStyles();
   // Note that you normally won't need to set the window ref as useScrollTrigger
   // will default to window.
   // This is only being set here because the demo is in an iframe.
@@ -57,9 +45,13 @@ function ScrollTop(props: Props) {
 
   return (
     <Zoom in={trigger}>
-      <div onClick={handleClick} role="presentation" className={classes.root}>
+      <Box
+        onClick={handleClick}
+        role="presentation"
+        sx={{ position: 'fixed', bottom: 2, right: 2 }}
+      >
         {children}
-      </div>
+      </Box>
     </Zoom>
   );
 }

docs/src/pages/components/app-bar/BottomAppBar.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -67,60 +68,34 @@ const messages = [
   },
 ];
 
-const useStyles = makeStyles((theme) => ({
-  text: {
-    padding: theme.spacing(2, 2, 0),
-  },
-  paper: {
-    paddingBottom: 50,
-  },
-  list: {
-    marginBottom: theme.spacing(2),
-  },
-  subheader: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  appBar: {
-    top: 'auto',
-    bottom: 0,
-  },
-  grow: {
-    flexGrow: 1,
-  },
-  fabButton: {
-    position: 'absolute',
-    zIndex: 1,
-    top: -30,
-    left: 0,
-    right: 0,
-    margin: '0 auto',
-  },
-}));
+const StyledFab = styled(Fab)({
+  position: 'absolute',
+  zIndex: 1,
+  top: -30,
+  left: 0,
+  right: 0,
+  margin: '0 auto',
+});
 
 export default function BottomAppBar() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
-      <Paper square className={classes.paper}>
-        <Typography
-          className={classes.text}
-          variant="h5"
-          gutterBottom
-          component="div"
-        >
+      <Paper square sx={{ pb: '50px' }}>
+        <Typography variant="h5" gutterBottom component="div" sx={{ p: 2, pb: 0 }}>
           Inbox
         </Typography>
-        <List className={classes.list}>
+        <List sx={{ mb: 2 }}>
           {messages.map(({ id, primary, secondary, person }) => (
             <React.Fragment key={id}>
               {id === 1 && (
-                <ListSubheader className={classes.subheader}>Today</ListSubheader>
+                <ListSubheader sx={{ bgcolor: 'background.paper' }}>
+                  Today
+                </ListSubheader>
               )}
 
               {id === 3 && (
-                <ListSubheader className={classes.subheader}>
+                <ListSubheader sx={{ bgcolor: 'background.paper' }}>
                   Yesterday
                 </ListSubheader>
               )}
@@ -135,15 +110,15 @@ export default function BottomAppBar() {
           ))}
         </List>
       </Paper>
-      <AppBar position="fixed" color="primary" className={classes.appBar}>
+      <AppBar position="fixed" color="primary" sx={{ top: 'auto', bottom: 0 }}>
         <Toolbar>
           <IconButton edge="start" color="inherit" aria-label="open drawer">
             <MenuIcon />
           </IconButton>
-          <Fab color="secondary" aria-label="add" className={classes.fabButton}>
+          <StyledFab color="secondary" aria-label="add">
             <AddIcon />
-          </Fab>
-          <div className={classes.grow} />
+          </StyledFab>
+          <Box sx={{ flexGrow: 1 }} />
           <IconButton color="inherit">
             <SearchIcon />
           </IconButton>

docs/src/pages/components/app-bar/BottomAppBar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -67,61 +68,33 @@ const messages = [
   },
 ];
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    text: {
-      padding: theme.spacing(2, 2, 0),
-    },
-    paper: {
-      paddingBottom: 50,
-    },
-    list: {
-      marginBottom: theme.spacing(2),
-    },
-    subheader: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    appBar: {
-      top: 'auto',
-      bottom: 0,
-    },
-    grow: {
-      flexGrow: 1,
-    },
-    fabButton: {
-      position: 'absolute',
-      zIndex: 1,
-      top: -30,
-      left: 0,
-      right: 0,
-      margin: '0 auto',
-    },
-  }),
-);
+const StyledFab = styled(Fab)({
+  position: 'absolute',
+  zIndex: 1,
+  top: -30,
+  left: 0,
+  right: 0,
+  margin: '0 auto',
+});
 
 export default function BottomAppBar() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
-      <Paper square className={classes.paper}>
-        <Typography
-          className={classes.text}
-          variant="h5"
-          gutterBottom
-          component="div"
-        >
+      <Paper square sx={{ pb: '50px' }}>
+        <Typography variant="h5" gutterBottom component="div" sx={{ p: 2, pb: 0 }}>
           Inbox
         </Typography>
-        <List className={classes.list}>
+        <List sx={{ mb: 2 }}>
           {messages.map(({ id, primary, secondary, person }) => (
             <React.Fragment key={id}>
               {id === 1 && (
-                <ListSubheader className={classes.subheader}>Today</ListSubheader>
+                <ListSubheader sx={{ bgcolor: 'background.paper' }}>
+                  Today
+                </ListSubheader>
               )}
               {id === 3 && (
-                <ListSubheader className={classes.subheader}>
+                <ListSubheader sx={{ bgcolor: 'background.paper' }}>
                   Yesterday
                 </ListSubheader>
               )}
@@ -135,15 +108,15 @@ export default function BottomAppBar() {
           ))}
         </List>
       </Paper>
-      <AppBar position="fixed" color="primary" className={classes.appBar}>
+      <AppBar position="fixed" color="primary" sx={{ top: 'auto', bottom: 0 }}>
         <Toolbar>
           <IconButton edge="start" color="inherit" aria-label="open drawer">
             <MenuIcon />
           </IconButton>
-          <Fab color="secondary" aria-label="add" className={classes.fabButton}>
+          <StyledFab color="secondary" aria-label="add">
             <AddIcon />
-          </Fab>
-          <div className={classes.grow} />
+          </StyledFab>
+          <Box sx={{ flexGrow: 1 }} />
           <IconButton color="inherit">
             <SearchIcon />
           </IconButton>

docs/src/pages/components/app-bar/ButtonAppBar.js

@@ -1,45 +1,26 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  title: {
-    flexGrow: 1,
-  },
-}));
-
 export default function ButtonAppBar() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
         <Toolbar>
-          <IconButton
-            edge="start"
-            className={classes.menuButton}
-            color="inherit"
-            aria-label="menu"
-          >
+          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             News
           </Typography>
           <Button color="inherit">Login</Button>
         </Toolbar>
       </AppBar>
-    </div>
+    </Box>
   );
 }