[docs] Migrate WithTheme demo to Typescript (#16941)

Author: rogerclotet

docs/src/pages/styles/advanced/WithTheme.js

@@ -7,7 +7,9 @@ function DeepChildRaw(props) {
 }
 
 DeepChildRaw.propTypes = {
-  theme: PropTypes.object.isRequired,
+  theme: PropTypes.shape({
+    spacing: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 const DeepChild = withTheme(DeepChildRaw);

docs/src/pages/styles/advanced/WithTheme.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ThemeProvider, WithTheme as WithThemeProps, withTheme } from '@material-ui/styles';
+
+interface Theme {
+  spacing: string;
+}
+
+interface Props extends WithThemeProps<Theme> {}
+
+function DeepChildRaw(props: Props) {
+  return <span>{`spacing ${props.theme.spacing}`}</span>;
+}
+
+const DeepChild = withTheme<Theme, typeof DeepChildRaw>(DeepChildRaw);
+
+function WithTheme() {
+  return (
+    <ThemeProvider
+      theme={{
+        spacing: '8px',
+      }}
+    >
+      <DeepChild />
+    </ThemeProvider>
+  );
+}
+
+export default WithTheme;