Styled Container Query
Use Container Queries [Element Queries] with styled-components
NPM-Package: styled-container-query
Demo
Installing
npm install styled-container-query --save
Usage
Nothing easier than that. You can use it like styled-components and an element query :container()
.
; const Child = styledspan``const Component = styledContainerQuerydiv` background-color: green; &:container(min-width: 500px) { background-color: red; { 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