Отзывчивые массивы в стилизованных компонентах - PullRequest
Новая
       78

Отзывчивые массивы в стилизованных компонентах

0 голосов
/ 19 января 2020

В Styled System они имеют Отзывчивый реквизит . Например: 

<Box width={['100%', '50%', '25%']} />

Это даст следующее CSS: 

.Box-hash {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box-hash {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box-hash {
    width: 25%;
  }
}

В качестве альтернативы можно использовать следующий синтаксис: 

<Box width={{ _: '100%', md: '50%', lg: '25%' }} />

Это даст тот же результат.

Мне интересно, возможно ли сделать что-то подобное со Styled Components. Я имею в виду что-то вроде этого: 

const StyledBox = styled.div`

  width: ${['100%', '50%', '25%']};
`

const OtherStyledBox = styled.div`

  width: ${{ _: '100%', md: '50%', lg: '25%' }};
`

Возможно ли это с помощью Styled Components? Если нет, есть идеи, как можно go о создании функции или "mixin", которая могла бы сделать это?

Спасибо.

Ответы [ 2 ]

1 голос
/ 20 января 2020

Если стиль вашего приложения "API" должен иметь 3 точки прерывания медиазапроса, вы можете использовать реквизиты в ваших styleled-компонентах и ​​возвращать правильный CSS. Укажите API, который вы хотите, например <StyledBox width={{ _: '100%', md: '50%', lg: '25%' }} />. 

import styled, { css } from 'styled-components';

const StyledBox = styled.div`
  ${props => props.width && css`
    width: ${width._};

    @media screen and (min-width: 40em) {
      width: ${width.md};
    }

    @media screen and (min-width: 52em) {
      width: ${width.lg};
    }
  `}
`;

StyledBox.propTypes = {
  width: PropTypes.shape({
    _: PropTypes.string.isRequired,
    md: PropTypes.string.isRequired,
    lg: PropTypes.string.isRequired,
  }),
};

StyledBox.defaultProps = {
  width: {
    _: '100%',
    md: '50%',
    lg: '25%'
  }
};

Styled-компонент css helper function

Использование: 

<StyledBox>
  This gets default media breakpoints, 100%, 50%, 25%
</StyledBox>

<StyledBox
  width={{ _: '90%', md: '80%', lg: '70%'}}
>
  This gets overridden media breakpoints, 90%, 80%, 70%
</StyledBox>

Обновление

Если вы предпочитаете НЕ каждый раз выписывать медиазапрос, включите его в служебную функцию стиля, которая будет использоваться в любом другом стилизованном компоненте. вы хотите быть отзывчивым. 

const mediaQueries = ({ sm = '100%', md = '50%', lg = '25%'}) => css`
  width: ${sm};

  @media screen and (min-width: 40em) {
    width: ${md};
  }

  @media screen and (min-width: 52em) {
    width: ${lg};
  }
`;

Затем в любой стиль компонента импортировать и использовать 

const ResponsiveDiv = styled.div`
  ...

  ${mediaQueries()}

  ...
`;

const CustomResponsiveDiv = styled.div`
  ...

  ${mediaQueries({ _: '90%', md: '80%', lg: '70%'})}

  ...
`;
0 голосов
/ 20 января 2020

Я использовал библиотеку Emotion JS Facepaint . С этой библиотекой я могу сделать следующее: 

const mq = facepaint([
  '@media(min-width: 480px)',
  '@media(min-width: 768px)',
  '@media(min-width: 992px)',
  '@media(min-width: 1200px)',
  '@media(min-width: 1600px)',
])

const Test = styled.div`
  background-color: orange;

  ${mq({
    width: ['10px', '25px', '50px', '100px', '200px', '400px'],
    height: ['10px', '25px', '50px', '100px', '200px', '400px'],
  })};
`

Это в основном то, что я хочу сделать. На данный момент я не знаю, как создать объектный систакс - то есть: width: { _: '15px', md: '30px', xl: '100px' }. Но пока это достаточно хорошо.

...