CSS styles are applied only after element is revealed about react-overdrive HOT 4 OPEN

@berzniz Love the concept - this is the first library I've found that could solve the problem of how to achieve complex multi-element transitions such described for Material Design: https://material.io/guidelines/motion/material-motion.html#material-motion-what-makes-a-good-transition

However, passing styling from a parent to child, through props or CSS className is a common pattern, particularly where the child component may be provided by a 3rd party library so can't be styled any other way. (Even within Material-UI we consume and in some cases restyle our own components to build up more complex components.)

This may not be a solvable problem, but just wanted to add some support to the issue.

from react-overdrive.

@mbrookes - these are some good points.

Since the elements are cloned and attached to the body, they will indeed lose all CSS rules inherited from their parents. Usually frameworks (such as bootstrap) are working on the body level so styles still apply.

There could be a solution to use getComputedStyle on all child elements and capture their styles, but this could be costly (especially for deeply nested DOM trees). I'll try to play with that idea.

from react-overdrive.

While the animation takes place, the elements are clones and moved without their wrapping elements. So while it inherits the size & position, it may lose colors, text-alignment that is styled on the parent elements.

I suggest adding the colors and text-align to the element itself (via CSS) (or to the body element).

from react-overdrive.

This could be partly solved by specifying a "root" element to nest the clones under. If the root doesn’t have position applied the absolute positioning should still work, but some CSS cascade would apply.

from react-overdrive.