Можно ли использовать медиа-селектор в styleled-компонентах для установки атрибутов?

Question

Можно ли сделать что-то вроде этого:

const ResponsiveDiv = styled.div.attrs({
    @media (max-width: 700px) {
        className: 'lg';
    }
})``;

Answer 1

Возможно использование медиа-запросов в стилизованных компонентах.Вы можете создать компонент-оболочку для переноса адаптивного содержимого.

const ResponsiveDiv = styled.div`
  @media (max-width: 700px) {
    // your styles here
  }
`;

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

render() {
  <ResponsiveDiv>
    // content goes here
  </ResponsiveDiv>
}

См. здесь