[docs] Remove JSS from more demos

mui · Apr 16, 2021 · 200252a · 200252a
1 parent fa784e3
commit 200252a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 142 deletions.
diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
@@ -16,12 +15,6 @@ import post1 from './blog-post.1.md';
 import post2 from './blog-post.2.md';
 import post3 from './blog-post.3.md';
 
-const useStyles = makeStyles((theme) => ({
-  mainGrid: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 const sections = [
   { title: 'Technology', url: '#' },
   { title: 'Design', url: '#' },
@@ -90,8 +83,6 @@ const sidebar = {
 };
 
 export default function Blog() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -104,7 +95,7 @@ export default function Blog() {
               <FeaturedPost key={post.title} post={post} />
             ))}
           </Grid>
-          <Grid container spacing={5} className={classes.mainGrid}>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
             <Main title="From the firehose" posts={posts} />
             <Sidebar
               title={sidebar.title}

diff --git a/docs/src/pages/getting-started/templates/blog/Blog.tsx b/docs/src/pages/getting-started/templates/blog/Blog.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
@@ -16,12 +15,6 @@ import post1 from './blog-post.1.md';
 import post2 from './blog-post.2.md';
 import post3 from './blog-post.3.md';
 
-const useStyles = makeStyles((theme) => ({
-  mainGrid: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 const sections = [
   { title: 'Technology', url: '#' },
   { title: 'Design', url: '#' },
@@ -90,8 +83,6 @@ const sidebar = {
 };
 
 export default function Blog() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -104,7 +95,7 @@ export default function Blog() {
               <FeaturedPost key={post.title} post={post} />
             ))}
           </Grid>
-          <Grid container spacing={5} className={classes.mainGrid}>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
             <Main title="From the firehose" posts={posts} />
             <Sidebar
               title={sidebar.title}

diff --git a/docs/src/pages/getting-started/templates/blog/Footer.js b/docs/src/pages/getting-started/templates/blog/Footer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
@@ -18,20 +18,11 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    // marginTop: theme.spacing(8),
-    padding: theme.spacing(6, 0),
-  },
-}));
-
 function Footer(props) {
-  const classes = useStyles();
   const { description, title } = props;
 
   return (
-    <footer className={classes.footer}>
+    <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
       <Container maxWidth="lg">
         <Typography variant="h6" align="center" gutterBottom>
           {title}
@@ -46,7 +37,7 @@ function Footer(props) {
         </Typography>
         <Copyright />
       </Container>
-    </footer>
+    </Box>
   );
 }
 

diff --git a/docs/src/pages/getting-started/templates/blog/Footer.tsx b/docs/src/pages/getting-started/templates/blog/Footer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
@@ -17,25 +17,16 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    // marginTop: theme.spacing(8),
-    padding: theme.spacing(6, 0),
-  },
-}));
-
 interface FooterProps {
   description: string;
   title: string;
 }
 
 export default function Footer(props: FooterProps) {
-  const classes = useStyles();
   const { description, title } = props;
 
   return (
-    <footer className={classes.footer}>
+    <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
       <Container maxWidth="lg">
         <Typography variant="h6" align="center" gutterBottom>
           {title}
@@ -50,6 +41,6 @@ export default function Footer(props: FooterProps) {
         </Typography>
         <Copyright />
       </Container>
-    </footer>
+    </Box>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/blog/Header.js b/docs/src/pages/getting-started/templates/blog/Header.js
@@ -1,45 +1,26 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import SearchIcon from '@material-ui/icons/Search';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  toolbar: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  toolbarTitle: {
-    flex: 1,
-  },
-  toolbarSecondary: {
-    justifyContent: 'space-between',
-    overflowX: 'auto',
-  },
-  toolbarLink: {
-    padding: theme.spacing(1),
-    flexShrink: 0,
-  },
-}));
-
 function Header(props) {
-  const classes = useStyles();
   const { sections, title } = props;
 
   return (
     <React.Fragment>
-      <Toolbar className={classes.toolbar}>
+      <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Button size="small">Subscribe</Button>
         <Typography
           component="h2"
           variant="h5"
           color="inherit"
           align="center"
           noWrap
-          className={classes.toolbarTitle}
+          sx={{ flex: 1 }}
         >
           {title}
         </Typography>
@@ -50,15 +31,19 @@ function Header(props) {
           Sign up
         </Button>
       </Toolbar>
-      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+      <Toolbar
+        component="nav"
+        variant="dense"
+        sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
+      >
         {sections.map((section) => (
           <Link
             color="inherit"
             noWrap
             key={section.title}
             variant="body2"
             href={section.url}
-            className={classes.toolbarLink}
+            sx={{ p: 1, flexShrink: 0 }}
           >
             {section.title}
           </Link>

diff --git a/docs/src/pages/getting-started/templates/blog/Header.tsx b/docs/src/pages/getting-started/templates/blog/Header.tsx
@@ -1,29 +1,11 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import SearchIcon from '@material-ui/icons/Search';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  toolbar: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  toolbarTitle: {
-    flex: 1,
-  },
-  toolbarSecondary: {
-    justifyContent: 'space-between',
-    overflowX: 'auto',
-  },
-  toolbarLink: {
-    padding: theme.spacing(1),
-    flexShrink: 0,
-  },
-}));
-
 interface HeaderProps {
   sections: ReadonlyArray<{
     title: string;
@@ -33,20 +15,19 @@ interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const classes = useStyles();
   const { sections, title } = props;
 
   return (
     <React.Fragment>
-      <Toolbar className={classes.toolbar}>
+      <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Button size="small">Subscribe</Button>
         <Typography
           component="h2"
           variant="h5"
           color="inherit"
           align="center"
           noWrap
-          className={classes.toolbarTitle}
+          sx={{ flex: 1 }}
         >
           {title}
         </Typography>
@@ -57,15 +38,19 @@ export default function Header(props: HeaderProps) {
           Sign up
         </Button>
       </Toolbar>
-      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+      <Toolbar
+        component="nav"
+        variant="dense"
+        sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
+      >
         {sections.map((section) => (
           <Link
             color="inherit"
             noWrap
             key={section.title}
             variant="body2"
             href={section.url}
-            className={classes.toolbarLink}
+            sx={{ p: 1, flexShrink: 0 }}
           >
             {section.title}
           </Link>

diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -1,34 +1,23 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Stack from '@material-ui/core/Stack';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  sidebarAboutBox: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.grey[200],
-  },
-  sidebarSection: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 function Sidebar(props) {
-  const classes = useStyles();
   const { archives, description, social, title } = props;
 
   return (
     <Grid item xs={12} md={4}>
-      <Paper elevation={0} className={classes.sidebarAboutBox}>
+      <Paper elevation={0} sx={{ p: 2, bgcolor: 'grey.200' }}>
         <Typography variant="h6" gutterBottom>
           {title}
         </Typography>
         <Typography>{description}</Typography>
       </Paper>
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Archives
       </Typography>
       {archives.map((archive) => (
@@ -37,17 +26,21 @@ function Sidebar(props) {
         </Link>
       ))}
 
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Social
       </Typography>
       {social.map((network) => (
-        <Link display="block" variant="body1" href="#" key={network.name}>
-          <Grid container direction="row" spacing={1} alignItems="center">
-            <Grid item>
-              <network.icon />
-            </Grid>
-            <Grid item>{network.name}</Grid>
-          </Grid>
+        <Link
+          display="block"
+          variant="body1"
+          href="#"
+          key={network.name}
+          sx={{ mb: 0.5 }}
+        >
+          <Stack direction="row" spacing={1} alignItems="center">
+            <network.icon />
+            <span>{network.name}</span>
+          </Stack>
         </Link>
       ))}
     </Grid>