diff --git a/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js b/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
new file mode 100644
index 00000000000000..d624c449c63773
--- /dev/null
+++ b/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import withWidth from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import toRenderProps from 'recompose/toRenderProps';
+
+const WithWidth = toRenderProps(withWidth());
+
+function RenderPropsWithWidth() {
+  return (
+    <WithWidth>
+      {({ width }) => <Typography variant="subtitle1">Current width: {width}</Typography>}
+    </WithWidth>
+  );
+}
+
+export default RenderPropsWithWidth;
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index fac29256e1e363..6596ab33fc17dc 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/docs/src/pages/layout/breakpoints/breakpoints.md
@@ -41,6 +41,13 @@ In the following demo, we change the rendered DOM element (*em*, <u>u</u>, ~~del
 
 ⚠️ `withWidth()` server-side rendering support is limited.
 
+### Render Props
+
+In some cases, you could have property name collisions using higher-order components.
+To avoid the issue, you can use the [render props](https://reactjs.org/docs/render-props.html) pattern like in the following demo.
+
+{{"demo": "pages/layout/breakpoints/RenderPropsWithWidth.js"}}
+
 ## API
 
 ### `withWidth([options]) => higher-order component`
diff --git a/pages/layout/breakpoints.js b/pages/layout/breakpoints.js
index 2587e107c7721d..d139e745ffbed5 100644
--- a/pages/layout/breakpoints.js
+++ b/pages/layout/breakpoints.js
@@ -21,6 +21,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/layout/breakpoints/WithWidth'), 'utf8')
+`,
+        },
+        'pages/layout/breakpoints/RenderPropsWithWidth.js': {
+          js: require('docs/src/pages/layout/breakpoints/RenderPropsWithWidth').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/layout/breakpoints/RenderPropsWithWidth'), 'utf8')
 `,
         },
       }}