Styled Container Query

Use Container Queries [Element Queries] with styled-components

NPM-Package: styled-container-query

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

Copyright © 2019 Freddy Ochner

LICENSE