How to do responsive flex with Styled System and Styled Components

Question

I'm trying to get me head around using Styled System with Styled Components .

I'm trying to have flex behave responsively (ie no flex at lower breakpoints). But I'm not having any luck.

Does anyone know what I'm doing wrong?

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

I figured out what I was doing wrong

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>
);