Отзывчивый реквизит в стиле ReactJS компонентов

Question

У меня есть идея, как сделать отзывчивый реквизит, используя Styled Components, но я не могу понять, как это реализовать.Моя идея выглядит примерно так:

<MyComponent 
  sm={{color: 'red', bg: 'green', }}
  md={{color: 'yellow', bg: 'orange' }}

/>

В этом случае color и bg - это просто реквизиты, которые я установил в своем стилизованном компоненте:

Идея в том, что у меня естьреквизит верхнего уровня, предназначенный для конкретного медиа-запроса, и внутри которого у меня есть объект, полный реквизитов, значения которого являются реквизитами, которые я хочу установить в этом медиа-запросе.

Теперь я знаю, каксделайте проверку реквизита цвета и bg - то есть, вот так:

const MyComponent = styled.div`
  ${props => props.color && `color: ${props.color};`}
  ${props => props.bg && `background-color: ${props.bg};`}
`

Но могу ли я сделать что-то вроде этого:

const MyComponent = styled.div`
  ${props => props.sm &&  MEDIA_QUERY_WITH_OBJECT_WITH_COLOR_AND_BG_PROPS}
  ${props => props.md && MEDIA_QUERY_WITH_OBJECT_WITH_COLOR_AND_BG_PROPS};`}
`

Или есть?какой-нибудь способ сделать это?

Answer 1

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

<MyComponent 
  sm={{color: 'red', bg: 'green', }}
  md={{color: 'yellow', bg: 'orange' }}
/>

и определить его следующим образом:

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

const MyComponent = styled.div`
  ${props => props.sm && css`
    color: ${props.sm.color};
    background-color: ${props.sm.bg};
  `}
  ${props => props.md && css`
    color: ${props.md.color};
    background-color: ${props.md.bg};
  `}
`;

Метод css из Styled Components может фактическиздесь не указывать, но вы всегда должны использовать его при создании CSS-строк, подобных этому, так как метод гарантирует, что все интерполяции будут работать, как и в любом другом стилизованном компоненте.Кроме того, без него вы, вероятно, не получите подсветку синтаксиса в вашем редакторе.

Поскольку здесь есть некоторая повторяющаяся логика (преобразование объекта CSS в строку CSS), мы можем извлечь это поведение в отдельную функцию:

const objectToCss = (style) => style && css`
  color: ${style.color};
  background-color: ${style.bg};
`;

const MyComponent = styled.div`
  ${props => objectToCSS(props.sm)}
  ${props => objectToCSS(props.md)}
`;

И этот финал - мой личный вкус, мне нравится просто ставить реквизит один раз на вершине стилизованного компонента вместо того, чтобы делать это каждый раз:

const MyComponent = styled.div(({ sm, md }) => css`
  position: absolute;
  ${objectToCSS(sm)}
  ${objectToCSS(md)}
  border-width: 1px;
`);

(Я добавил несколько дополнительных строк CSS в качестве примера на случай, если неясно, что это все еще обычная строка Styled Components)