For styled-components + container-query + rebass + react-router v4.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>
  );
}

// from: https://github.com/callemall/material-ui/issues/6115#issuecomment-279142783

// styled-components works with any third party component library:

import { Button } from 'material-ui'

const MyButton = styled(Button)`
  // Only these styles will be overridden
  background: red;
`
// This works as long as the components attach the className prop internally to some DOM node:

const MaterialUIButton = (props) => {
  /* ... */
  // As long as props.className is attached, the above usage will work
  return <button className={`bla ${props.className}`} />
}


// component-queries plus react-router: https://github.com/jxnblk/rebass/issues/36#issuecomment-193002542