[transitions] fix #2843 avoid overriding style

src/transitions/Fade.js

@@ -61,28 +61,16 @@ class Fade extends React.Component {
   };
 
   render() {
-    const {
-      appear,
-      children,
-      onEnter,
-      onEntering,
-      onExit,
-      style: styleProp,
-      theme,
-      ...other
-    } = this.props;
-
-    const style = { ...styleProp };
+    const { appear, children, onEnter, onEntering, onExit, theme, ...other } = this.props;
 
     // For server side rendering.
-    if (!this.props.in && !this.state.mounted && appear) {
-      style.opacity = '0';
-    }
+    const styleServer =
+      !this.props.in && !this.state.mounted && appear ? { style: { opacity: '0' } } : {};
 
     return (
       <Transition
         appear={appear}
-        style={style}
+        {...styleServer}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
         onExit={this.handleExit}

src/transitions/Fade.spec.js

@@ -88,7 +88,7 @@ describe('<Fade />', () => {
           <div>Foo</div>
         </Fade>,
       );
-      assert.deepEqual(wrapper.find(Transition).props().style, {});
+      assert.equal(wrapper.find(Transition).props().style, undefined);
     });
   });
 });

src/transitions/Grow.js

@@ -104,19 +104,14 @@ class Grow extends React.Component {
       onEnter,
       onEntering,
       onExit,
-      style: styleProp,
       theme,
       timeout,
       transitionClasses = {},
       ...other
     } = this.props;
 
-    const style = { ...children.props.style, ...styleProp };
-
     // For server side rendering.
-    if (!this.props.in || appear) {
-      style.opacity = '0';
-    }
+    const styleServer = !this.props.in || appear ? { style: { opacity: '0' } } : {};
 
     return (
       <CSSTransition
@@ -126,7 +121,7 @@ class Grow extends React.Component {
         onExit={this.handleExit}
         addEndListener={this.addEndListener}
         appear={appear}
-        style={style}
+        {...styleServer}
         timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >

src/transitions/Slide.js

@@ -173,25 +173,13 @@ class Slide extends React.Component {
   };
 
   render() {
-    const {
-      children,
-      onEnter,
-      onEntering,
-      onExit,
-      onExited,
-      style: styleProp,
-      theme,
-      ...other
-    } = this.props;
-
-    const style = { ...styleProp };
+    const { children, onEnter, onEntering, onExit, onExited, theme, ...other } = this.props;
 
     // We use this state to handle the server-side rendering.
     // We don't know the width of the children ahead of time.
     // We need to render it.
-    if (!this.props.in && !this.state.mounted) {
-      style.visibility = 'hidden';
-    }
+    const styleServer =
+      !this.props.in && !this.state.mounted ? { style: { visibility: 'hidden' } } : {};
 
     return (
       <EventListener target="window" onResize={this.handleResize}>
@@ -201,7 +189,7 @@ class Slide extends React.Component {
           onExit={this.handleExit}
           onExited={this.handleExited}
           appear
-          style={style}
+          {...styleServer}
           ref={node => {
             this.transition = node;
           }}

src/transitions/Slide.spec.js

@@ -34,6 +34,24 @@ describe('<Slide />', () => {
     assert.strictEqual(wrapper.childAt(0).name(), 'Transition');
   });
 
+  it('should not override children styles', () => {
+    const style = { color: 'blue' };
+    const wrapper = shallow(
+      <Slide {...defaultProps}>
+        <div style={style} />
+      </Slide>,
+    );
+    assert.strictEqual(wrapper.name(), 'EventListener');
+    assert.strictEqual(wrapper.childAt(0).name(), 'Transition');
+    assert.deepEqual(
+      wrapper
+        .childAt(0)
+        .childAt(0)
+        .props().style,
+      style,
+    );
+  });
+
   describe('event callbacks', () => {
     it('should fire event callbacks', () => {
       const events = ['onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];

src/transitions/Zoom.js

@@ -69,22 +69,18 @@ class Zoom extends React.Component {
       onEnter,
       onEntering,
       onExit,
-      style: styleProp,
       theme,
       ...other
     } = this.props;
 
-    const style = { ...styleProp };
-
     // For server side rendering.
-    if (!this.props.in && !this.state.mounted && appear) {
-      style.transform = 'scale(0)';
-    }
+    const styleServer =
+      !this.props.in && !this.state.mounted && appear ? { style: { transform: 'scale(0)' } } : {};
 
     return (
       <Transition
         appear={appear}
-        style={style}
+        {...styleServer}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
         onExit={this.handleExit}

src/transitions/Zoom.spec.js

@@ -100,7 +100,7 @@ describe('<Zoom />', () => {
           <div>Foo</div>
         </Zoom>,
       );
-      assert.deepEqual(wrapper.find(Transition).props().style, {});
+      assert.equal(wrapper.find(Transition).props().style, undefined);
     });
   });
 });