javascript - 在使用 react-reveal 等高阶组件时保持 flexbox 样式

Question

我正在使用 flexbox 和 styled-components 来布局和调整我应用中元素的大小。我想添加一个显示动画并使用 react-reveal 模块。根据文档，它应该与样式组件一起开箱即用。

问题是 HOC 在内部组件周围包裹了一个额外的 div，这打破了 flexbox 父->子关系。

这是我添加动画的方法。

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 />)

这个 div 是包含 div 的 3 个 div 之一，看起来像

const InnerContainer = styled.div`
   width: 80%;
   max-width: 1200px;
   padding: 100px;

   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
`

如果不应用动画，此布局可以正常工作，但当我使用 HOC withReveal 时，它会在 Card 组件周围包裹另一个 div，这会弄乱 flex 布局。

我尝试过使用其他动画模块，但几乎每个 reactjs 动画或样式模块都使用这种使用 HOC 组件的技术。

我尝试将 HOC 组件包装在 styled() 中并添加 display: contents 以尝试将 CSS 传递给 child ，但这似乎搞砸了进一步布局。

Answer 1

您可以使用 styled-components 编写自己的嵌套样式

试试这个

const InnerContainer = styled.div`
  width: 80%;
  max-width: 1200px;
  padding: 100px;

  > div {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
`