diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index 6d09ac292..bdde40a89 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/packages/mdx/mdx-hast-to-jsx.js
@@ -105,10 +105,10 @@ function toJSX(node, parentNode = {}, options = {}) {
       } class MDXContent extends React.Component {
   constructor(props) {
     super(props)
-    this.layout = ${layout}
+    this.layout = ${layout || 'null'}
   }
   render() {
-    const { components = {} } = this.props
+    const { components = {}, ...props } = this.props
 
     return <MDXTag
              name="wrapper"
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
index a3d9cffed..5289daa98 100644
--- a/packages/mdx/test/index.test.js
+++ b/packages/mdx/test/index.test.js
@@ -85,10 +85,10 @@ it('Should match sample blog post snapshot', async () => {
 "export default class MDXContent extends React.Component {
   constructor(props) {
     super(props);
-    this.layout = undefined;
+    this.layout = null;
   }
   render() {
-    const { components = {} } = this.props;
+    const { components = {}, ...props } = this.props;
 
     return (
       <MDXTag name=\\"wrapper\\" components={components}>
diff --git a/packages/runtime/src/index.js b/packages/runtime/src/index.js
index 12f2bdd6c..0cd13de63 100644
--- a/packages/runtime/src/index.js
+++ b/packages/runtime/src/index.js
@@ -37,7 +37,7 @@ export default ({
     ...keys,
     `${code}
 
-  return React.createElement(MDXContent, { components });`
+  return React.createElement(MDXContent, { components, ...props });`
   )
 
   return fn({}, React, ...values)