如何对带样式的系统和带样式的组件执行响应式flex

Question

我正在尝试在Styled Components中使用Styled System。

我正在尝试让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>
);

​

​

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