Как правильно настроить flex для нескольких компонентов? - PullRequest
Новая
       12

Как правильно настроить flex для нескольких компонентов?

0 голосов
/ 30 января 2019

В моем компонентеactjj / 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>)
}

Когда я изменяю размер браузера, Main.jsx и MyComponent не «слипаются» вместе, я подозреваю, из-за различных настроек flex.Как я могу изменить это, чтобы заставить их изменять размеры «вместе» в основном, иметь надлежащее поведение Flex?Это должно быть без перемещения MyComponent в Main?

...