Styled Container Query

Use Container Queries [Element Queries] with styled-components

Demo

Online Demo
Codesandbox

Installing

npm install styled-container-query --save

Usage

Nothing easier than that. You can use it like styled-components and an element query :container().

import styledContainerQuery from 'styled-container-query';
const Child = styled.span``
const Component = styledContainerQuery.div`
  background-color: green;
  &:container(min-width: 500px) {
    background-color: red;
    ${Child} {
          color: white;
      }
  }
  &:container(max-width: 600px and max-width: 900px) {
      background-color: yellow;
  }
  &:container(min-height: 500px) {
      background-color: blue;
  }
  &:container(min-width: 50%) {
      background-color: blue;
  }
`;

Known issues

Props inside a container-query does not work. #1

License

MIT License

LICENSE