Как сделать гибкую адаптацию с помощью Styled System и Styled Components

Question

Я пытаюсь заставить меня задуматься, используя Styled System с Styled Components .

Я пытаюсь заставить flex вести себя отзывчиво (то есть не сгибать при более низких точках останова). Но мне не повезло.

Кто-нибудь знает, что я делаю не так?

import styled from 'styled-components';

import { flexWrap } from 'styled-system';

const Flex = styled.div`
  ${flexWrap};
`;

const App = () => (
  <Flex flexWrap="wrap">
    <div>minimal</div>
    <div>minimal</div>
  </Flex>
);

Answer 1

Я понял, что я делаю не так

import styled from 'styled-components';

import { responsiveStyle, flexWrap } from 'styled-system';

const wrap = responsiveStyle({
  prop: 'wrap',
  cssProperty: 'flexWrap',
});

const Flex = styled.div`
  display: flex;
  ${wrap};
`;

const App = () => (
  <Flex wrap={['wrap','wrap', 'nowrap']}>
    <div>minimal</div>
    <div>minimal</div>
  </Flex>
);