我正在使用 flexboxstyled-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 布局。

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

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

最佳答案

您可以使用 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;
  }
`

关于javascript - 使用 react-reveal 等高阶组件时保持 flexbox 样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53365085/

10-12 12:35
查看更多