Skip to content
Use Container Queries [Element Queries] with styled-components
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples 🔖 v1.3.2 Update dependencies Jun 6, 2019
src Add Copyright Text to top of file May 21, 2019
.babelrc
.gitignore
.npmignore Ignore LICENSE file in npm Dec 18, 2018
LICENSE 2019 Jan 2, 2019
README.md 🔖 v1.3.0 Apr 18, 2019
package-lock.json 🔖 v1.3.3 Update dependencies Jul 23, 2019
package.json 🔖 v1.3.3 Update dependencies Jul 23, 2019
webpack.config.js 🔖 v1.3.2 Update dependencies Jun 6, 2019

README.md

NPM-Version NPM-Downloads NPM-Size NPM-License

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().

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

You can’t perform that action at this time.