Reactjs 如何使用样式化系统和样式化组件实现响应性flex

我正试着让我的头周围使用

我试图让flex表现出响应性（即在较低的断点处没有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>
);

从“样式化组件”导入样式化；
从“样式化系统”导入{flexWrap}；
const Flex=styled.div`
${flexWrap}；
`;
常量应用=（）=>(
最小的
最小的
);

---

我知道我做错了什么

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

从“样式化组件”导入样式化；
从“样式化系统”导入{responsiveStyle，flexWrap}；
常量换行=响应样式({
道具：“包裹”，
cssProperty:“flexWrap”，
});
const Flex=styled.div`
显示器：flex；
${wrap}；
`;
常量应用=（）=>(
最小的
最小的
);