diff --git a/docs/src/pages/styles/advanced/WithTheme.js b/docs/src/pages/styles/advanced/WithTheme.js
index 2fe7df53951faa..892c02c7fbfa5c 100644
--- a/docs/src/pages/styles/advanced/WithTheme.js
+++ b/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);
diff --git a/docs/src/pages/styles/advanced/WithTheme.tsx b/docs/src/pages/styles/advanced/WithTheme.tsx
new file mode 100644
index 00000000000000..04e9cd9b5379a6
--- /dev/null
+++ b/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;