[docs] Add classNames TS demo

docs/src/pages/customization/components/ClassNames.js

@@ -1,24 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 // We can inject some CSS into the DOM.
-const styles = {
-  root: {
-    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-    borderRadius: 3,
-    border: 0,
-    color: 'white',
-    height: 48,
-    padding: '0 30px',
-    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-  },
-};
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+      borderRadius: 3,
+      border: 0,
+      color: 'white',
+      height: 48,
+      padding: '0 30px',
+      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    },
+  }),
+);
 
-function ClassNames(props) {
-  const { classes, children, className, ...other } = props;
+export default function ClassNames(props) {
+  const { children, className, ...other } = props;
+  const classes = useStyles();
 
   return (
     <Button className={clsx(classes.root, className)} {...other}>
@@ -29,8 +32,5 @@ function ClassNames(props) {
 
 ClassNames.propTypes = {
   children: PropTypes.node,
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
 };
-
-export default withStyles(styles)(ClassNames);

docs/src/pages/customization/components/ClassNames.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+
+interface Props extends ButtonProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+// We can inject some CSS into the DOM.
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+      borderRadius: 3,
+      border: 0,
+      color: 'white',
+      height: 48,
+      padding: '0 30px',
+      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    },
+  }),
+);
+
+export default function ClassNames(props: Props) {
+  const { children, className, ...other } = props;
+  const classes = useStyles();
+
+  return (
+    <Button className={clsx(classes.root, className)} {...other}>
+      {children || 'class names'}
+    </Button>
+  );
+}