[docs] Improve the customization demos

docs/src/pages/demos/badges/CustomizedBadge.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import { makeStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const useStyles = makeStyles(theme => ({
+const StyledBadge = withStyles(theme => ({
   badge: {
     top: '50%',
     right: -3,
@@ -13,16 +13,14 @@ const useStyles = makeStyles(theme => ({
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
     }`,
   },
-}));
+}))(Badge);
 
 function CustomizedBadge() {
-  const classes = useStyles();
-
   return (
     <IconButton aria-label="Cart">
-      <Badge badgeContent={4} color="primary" classes={{ badge: classes.badge }}>
+      <StyledBadge badgeContent={4} color="primary">
         <ShoppingCartIcon />
-      </Badge>
+      </StyledBadge>
     </IconButton>
   );
 }

docs/src/pages/demos/badges/CustomizedBadge.tsx

@@ -1,30 +1,26 @@
 import React from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { withStyles, Theme } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    badge: {
-      top: '50%',
-      right: -3,
-      // The border color match the background color.
-      border: `2px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
-      }`,
-    },
-  }),
-);
+const StyledBadge = withStyles((theme: Theme) => ({
+  badge: {
+    top: '50%',
+    right: -3,
+    // The border color match the background color.
+    border: `2px solid ${
+      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
+    }`,
+  },
+}))(Badge);
 
 function CustomizedBadge() {
-  const classes = useStyles();
-
   return (
     <IconButton aria-label="Cart">
-      <Badge badgeContent={4} color="primary" classes={{ badge: classes.badge }}>
+      <StyledBadge badgeContent={4} color="primary">
         <ShoppingCartIcon />
-      </Badge>
+      </StyledBadge>
     </IconButton>
   );
 }

docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,11 +8,8 @@ import Avatar from '@material-ui/core/Avatar';
 import HomeIcon from '@material-ui/icons/Home';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const styles = theme => ({
+const StyledBreadcrumb = withStyles(theme => ({
   root: {
-    padding: theme.spacing(1),
-  },
-  chip: {
     backgroundColor: theme.palette.grey[100],
     height: 24,
     color: theme.palette.grey[800],
@@ -26,30 +22,25 @@ const styles = theme => ({
       backgroundColor: emphasize(theme.palette.grey[300], 0.12),
     },
   },
-  avatar: {
-    background: 'none',
-    marginRight: -theme.spacing(1.5),
-  },
-});
+}))(Chip); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CustomBreadcrumb(props) {
-  const { classes, ...rest } = props;
-  return <Chip className={classes.chip} {...rest} />;
-}
-
-CustomBreadcrumb.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+  },
+  avatar: {
+    background: 'none',
+    marginRight: -theme.spacing(1.5),
+  },
+}));
 
-function CustomizedBreadcrumbs(props) {
-  const { classes } = props;
+function CustomizedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.root}>
@@ -77,8 +68,4 @@ function CustomizedBreadcrumbs(props) {
   );
 }
 
-CustomizedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CustomizedBreadcrumbs);
+export default CustomizedBreadcrumbs;

docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,52 +8,41 @@ import Avatar from '@material-ui/core/Avatar';
 import HomeIcon from '@material-ui/icons/Home';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-interface CustomBreadcrumbProps extends WithStyles<typeof styles> {}
+const StyledBreadcrumb = withStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: theme.palette.grey[100],
+    height: 24,
+    color: theme.palette.grey[800],
+    fontWeight: theme.typography.fontWeightRegular,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.grey[300],
+    },
+    '&:active': {
+      boxShadow: theme.shadows[1],
+      backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+    },
+  },
+}))(Chip) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
 
-interface CustomizedBreadcrumbsProps extends WithStyles<typeof styles> {}
+function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: theme.spacing(1),
     },
-    chip: {
-      backgroundColor: theme.palette.grey[100],
-      height: 24,
-      color: theme.palette.grey[800],
-      fontWeight: theme.typography.fontWeightRegular,
-      '&:hover, &:focus': {
-        backgroundColor: theme.palette.grey[300],
-      },
-      '&:active': {
-        boxShadow: theme.shadows[1],
-        backgroundColor: emphasize(theme.palette.grey[300], 0.12),
-      },
-    },
     avatar: {
       background: 'none',
       marginRight: -theme.spacing(1.5),
     },
-  });
+  }),
+);
 
-function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-  event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
-}
-
-function CustomBreadcrumb(props: CustomBreadcrumbProps) {
-  const { classes, ...rest } = props;
-  return <Chip className={classes.chip} {...rest} />;
-}
-
-CustomBreadcrumb.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
-
-function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) {
-  const { classes } = props;
+function CustomizedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.root}>
@@ -82,8 +70,4 @@ function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) {
   );
 }
 
-CustomizedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CustomizedBreadcrumbs);
+export default CustomizedBreadcrumbs;

docs/src/pages/demos/buttons/CustomizedButtons.js

@@ -1,23 +1,12 @@
 import React from 'react';
-import clsx from 'clsx';
-import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
-const useStyles = makeStyles(theme => ({
-  margin: {
-    margin: theme.spacing(1),
-  },
-  cssRoot: {
-    color: theme.palette.getContrastText(purple[500]),
-    backgroundColor: purple[500],
-    '&:hover': {
-      backgroundColor: purple[700],
-    },
-  },
-  bootstrapRoot: {
+const BootstrapButton = withStyles({
+  root: {
     boxShadow: 'none',
     textTransform: 'none',
     fontSize: 16,
@@ -51,6 +40,22 @@ const useStyles = makeStyles(theme => ({
       boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
     },
   },
+})(Button);
+
+const ColorButton = withStyles(theme => ({
+  root: {
+    color: theme.palette.getContrastText(purple[500]),
+    backgroundColor: purple[500],
+    '&:hover': {
+      backgroundColor: purple[700],
+    },
+  },
+}))(Button);
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1),
+  },
 }));
 
 const theme = createMuiTheme({
@@ -64,22 +69,17 @@ function CustomizedButtons() {
 
   return (
     <div>
-      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
+      <ColorButton variant="contained" color="primary" className={classes.margin}>
         Custom CSS
-      </Button>
+      </ColorButton>
       <ThemeProvider theme={theme}>
         <Button variant="contained" color="primary" className={classes.margin}>
-          ThemeProvider
+          Theme Provider
         </Button>
       </ThemeProvider>
-      <Button
-        variant="contained"
-        color="primary"
-        disableRipple
-        className={clsx(classes.margin, classes.bootstrapRoot)}
-      >
+      <BootstrapButton variant="contained" color="primary" disableRipple className={classes.margin}>
         Bootstrap
-      </Button>
+      </BootstrapButton>
     </div>
   );
 }