Nsryjdtyk

I am using flexbox with styled-components to layout and size the elements in my app. I want to add a reveal animation and am using the react-reveal module. According to the documentation it is supposed to work out of the box with styled-components.

The problem is that the HOC wraps an extra div around the inner component which breaks the flexbox parent->child relationship.

Here is how I add the animation.

const Card = styled.div`

   /* style */

   min-height: 400px;

   min-width: 100px;

   max-width: 400px;

   background-color: white;



   /* flex */

   display: flex;

   flex-basis: 25%;

   flex-direction: column;

   justify-content: flex-start;

   align-items: center;

`;



/* apply fade in animation */

const Card = withReveal(card, <Fade bottom />)

This div is one of 3 divs inside a containing div that looks like

const InnerContainer = styled.div`

   width: 80%;

   max-width: 1200px;

   padding: 100px;



   display: flex;

   flex-direction: row;

   justify-content: space-evenly;

   align-items: center;

`

Without applying the animation this layout works correctly, but when I use the HOC withReveal it wraps another div around the Card Component which messes up the flex layout.

I've tried using other animation modules but this technique of using a HOC component is the one used by almost every reactjs animation or styling module.

I tried wrapping the HOC component in a styled() and adding display: contents to try and pass through the CSS to the children but this seems to mess up the layout even further.

You can write your own nested styles with styled-components

Try this

const InnerContainer = styled.div`

  width: 80%;

  max-width: 1200px;

  padding: 100px;



  > div {

    display: flex;

    flex-direction: row;

    justify-content: space-evenly;

    align-items: center;

  }

`