Question

在我的reactjs / styledcomponents组件中，我具有以下代码段：

<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
    {children}
    <MyComponent/>
</Flex>

其中一个名为Main.jsx的子级具有其自己的Flex设置，如下所示：

<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
    <Form onSubmit={handleSubmit(this.handleRequest)}>
        <Field
          name={filterConfig.name}
          component={renderSearchField}
          {...filterConfig}
        />
        <Button type="submit"  label="Go" />
    </Form>
</Flex>

MyComponent具有以下代码：

const StyledBox = styled(Flex)justify-content: flex-end; margin-right: 147px; margin-bottom: 6px;;

render = () => {
    return (<StyledBox>
           <p>hello</p>
    </StyledBox>)
}

当我调整浏览器大小时，我怀疑是因为不同的flex设置，Main.jsx和MyComponent不会“粘在一起”。如何更改此设置以使它们“一起”调整大小，使其基本具有适当的Flex行为？应该没有将MyComponent移到Main吗？

如何为多个组件正确设置flex？

0 个答案: