diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js
index 2487d2705536b9..78deb388d12c93 100644
--- a/packages/material-ui/src/Fade/Fade.js
+++ b/packages/material-ui/src/Fade/Fade.js
@@ -57,24 +57,22 @@ class Fade extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...children.props.style,
-    };
-
     return (
       <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            style: {
-              opacity: 0,
-              ...styles[state],
-              ...style,
-            },
-            'aria-hidden': state === 'exited',
+        {(state, childProps) => {
+          const style = {
+            opacity: 0,
+            ...styles[state],
+            ...styleProp,
+            ...childProps.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }
diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
index 18c11e33bf6c0d..cf417df7c1dece 100644
--- a/packages/material-ui/src/Grow/Grow.js
+++ b/packages/material-ui/src/Grow/Grow.js
@@ -108,11 +108,6 @@ class Grow extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, timeout, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...(React.isValidElement(children) ? children.props.style : {}),
-    };
-
     return (
       <Transition
         appear
@@ -122,18 +117,21 @@ class Grow extends React.Component {
         timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
-            style: {
-              opacity: 0,
-              transform: getScale(0.75),
-              ...styles[state],
-              ...style,
-            },
+        {(state, childProps) => {
+          const style = {
+            opacity: 0,
+            transform: getScale(0.75),
+            ...styles[state],
+            ...styleProp,
+            ...children.props.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index c00f550f04716a..94843616eab24e 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -209,7 +209,7 @@ class Slide extends React.Component {
           }}
           {...other}
         >
-          {state => {
+          {(state, childProps) => {
             const style = {
               visibility: state === 'exited' ? 'hidden' : undefined,
               ...styleProp,
@@ -217,6 +217,7 @@ class Slide extends React.Component {
             };
 
             return React.cloneElement(children, {
+              ...childProps,
               'aria-hidden': state === 'exited',
               style,
             });
diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js
index 4f8b3c763064b0..9eac133b90b939 100644
--- a/packages/material-ui/src/Zoom/Zoom.js
+++ b/packages/material-ui/src/Zoom/Zoom.js
@@ -56,24 +56,22 @@ class Zoom extends React.Component {
   render() {
     const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
 
-    const style = {
-      ...styleProp,
-      ...children.props.style,
-    };
-
     return (
       <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
-        {(state, childProps) =>
-          React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
-            style: {
-              transform: 'scale(0)',
-              ...styles[state],
-              ...style,
-            },
+        {(state, childProps) => {
+          const style = {
+            transform: 'scale(0)',
+            ...styles[state],
+            ...styleProp,
+            ...children.props.style,
+          };
+
+          return React.cloneElement(children, {
             ...childProps,
-          })
-        }
+            'aria-hidden': state === 'exited',
+            style,
+          });
+        }}
       </Transition>
     );
   }
diff --git a/packages/material-ui/src/Zoom/Zoom.test.js b/packages/material-ui/src/Zoom/Zoom.test.js
index 592a9f0f47f381..756caa35c1d51f 100644
--- a/packages/material-ui/src/Zoom/Zoom.test.js
+++ b/packages/material-ui/src/Zoom/Zoom.test.js
@@ -87,6 +87,7 @@ describe('<Zoom />', () => {
       );
       assert.deepEqual(wrapper.find('div').props().style, {
         transform: 'scale(0)',
+        visibility: 'hidden',
       });
     });
 
@@ -98,6 +99,7 @@ describe('<Zoom />', () => {
       );
       assert.deepEqual(wrapper.find('div').props().style, {
         transform: 'scale(0)',
+        visibility: 'hidden',
       });
     });
   });