1.3.5 • Published 3 years ago
styled-container-query v1.3.5
Styled Container Query
Use Container Queries [Element Queries] with styled-components
NPM-Package: styled-container-query
Demo
https://freddyfy.github.io/styled-container-query/
https://codesandbox.io/s/483170qvyw
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;
}
`;
Known issues
- Props inside a container-query does not work. #1
License
MIT License
Copyright © 2019 Freddy Ochner
1.3.6-beta.1
3 years ago
1.3.5
4 years ago
1.3.4
5 years ago
1.3.3
5 years ago
1.3.2
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.3.0-beta.2
5 years ago
1.3.0-beta.1
5 years ago
1.3.0-beta.0
5 years ago
1.2.6
5 years ago
1.2.5
5 years ago
1.2.4
5 years ago
1.2.3
5 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago