[docs] Add TS demo for WithWidth (#17930)

Author: burtyish

docs/src/pages/customization/breakpoints/WithWidth.js

@@ -21,7 +21,7 @@ function WithWidth(props) {
 }
 
 WithWidth.propTypes = {
-  width: PropTypes.string.isRequired,
+  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
 };
 
 export default withWidth()(WithWidth);

docs/src/pages/customization/breakpoints/WithWidth.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import withWidth from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+
+type TagName = 'em' | 'u' | 'del';
+
+const components: Partial<Record<Breakpoint, TagName>> = {
+  sm: 'em',
+  md: 'u',
+  lg: 'del',
+};
+
+function WithWidth(props: { width: Breakpoint }) {
+  const { width } = props;
+  const Component = components[width] || 'span';
+
+  return (
+    <Typography variant="subtitle1">
+      <Component>{`Current width: ${width}`}</Component>
+    </Typography>
+  );
+}
+
+export default withWidth()(WithWidth);