Fade cannot fade components that don't pass down `style`

• I have searched the issues of this repository and believe that this is not a duplicate.

---

Previous Behavior In version 1.0.0.beta31, you could put anything inside a <Fade> component and it would get faded.

Current Behavior As of version 1.0.0.beta32, it seems that Fade relies on the child component doing the right thing with the style prop.

Here’s a CodeSandbox example: https://codesandbox.io/s/7j8y2rqyn6

I am not sure if this is intended behavior or not, but the change caught me off guard and I figured I should mention it.

[AdamGorkoz]

@oliviertassinari I would like to take this one if you don’t mind 😃

Since this is my first contribution (ever) i’d like to better understand the agreed upon solution here. So the Fade component should wrap what ever children it gets with a div automatically so the fade transition will work correct ? or are we saying that the user should be aware that he needs to add a single div as child and the docs will tell him that ?

And as for docs , how should this be documented ? if we are going with the first solution i don’t think it should appear in the API doc of this components since its internal .

[oliviertassinari]

@sebald Has already experienced this issue. The simplest solution is to add an extra <div> element as first children to receive the style property. This change was made in order to better support server rendering. I believe we need to document this point.

<Fade in={this.state.in}>
+ <div>
    <UnfadableDiv />
+ </div>
</Fade>