我正在使用 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 布局。我尝试过使用其他动画模块,但这种使用 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/