Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/FreddyFY/styled-container-query below:

FreddyFY/styled-container-query: Use Container Queries [Element Queries] with styled-components

• Pricing

Use Container Queries [Element Queries] with styled-components

NPM-Package: styled-container-query

• Online Demo
• Codesandbox

npm install styled-container-query --save

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;
  }
`;

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

MIT License

Copyright © 2019 Freddy Ochner

LICENSE

Use Container Queries [Element Queries] with styled-components

You can’t perform that action at this time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4