Как сделать адаптивную гибкость с помощью Styled System и 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>
);

Edit Minimal Flex Styled-System Styled-Component


reactjs styled-components
person skube    schedule 12.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я понял, что я делаю неправильно

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>
);
person skube    schedule 12.05.2018