Styled-component with react-container-query

styled-components-react-container-query.js

// from: https://github.com/styled-components/styled-components/issues/416#issuecomment-276230181

import React from 'react';
import classnames from 'classnames';
import styled from 'styled-components';
import { ContainerQuery } from 'react-container-query';

const query = {
  'box1': {
    minWidth: 250,
    maxWidth: 599,
  },
  'box2': {
    minWidth: 600,
  },
};

const Box = styled.div`
  color: white;
  background: green;

  &.box1 {
    background: gold;
  }

  &.box2 {
    background: red;
  }
`;

export default BoxContainer = (props) => {
  return (
    <ContainerQuery query={query}>
      {(params) => (
        <Box {...props} className={classnames(params)} />
      )}
    </ContainerQuery>
  );
}
But yes, as @AntonAderum mentioned, it would be nice to be able to do this instead:

const Box = styled.div`
  color: white;
  background: green;

  &:container-query(min-width: 250px and max-width: 599px) {
    background: gold;
  }

  &:container-query(min-width: 600px) {
    background: red;
  }
`;

references:

• https://github.com/d6u/react-container-query
• https://github.com/ctrlplusb/react-sizeme
• https://github.com/jxnblk/rebass
• https://github.com/renatorib/react-sizes
• https://github.com/ctrlplusb/react-component-queries