如何使用 Styled System 和 Styled Components 进行响应式 flex答案

【问题标题】：How to do responsive flex with Styled System and Styled Components如何使用 Styled System 和 Styled Components 进行响应式 flex
【发布时间】：2018-05-13 07:57:54
【问题描述】：

我正在尝试使用Styled System 和Styled Components 来让我四处走动。

我试图让 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>
);

【问题讨论】：

标签： reactjs styled-components

【解决方案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>
);

【讨论】：