styled-components-sass-mq
v1.1.2
Published
A port of sass-mq for styled-components to help you compose media queries in an elegant way.
Downloads
23
Maintainers
Readme
Install
Install styled-components-sass-mq
using npm:
npm install --save styled-components-sass-mq
Usage
Refer to sass-mq docs for a full list of options. styled-components-sass-mq
provides feature parity with sass-mq, with exception to its show-breakpoint
and add-breakpoint
functions.
Here's a basic example:
import React from 'react';
import styled from 'styled-components';
import createMediaQueries from 'styled-components-mq';
// Use sass-mq default breakpoints, or like below, create your own
const breakpoints = {
"sm": 370,
"md": 768,
"lg": 1024,
"xlg": 1440
}
// Inject your custom breakpoints into the mq function
const mq = createMediaQueries(breakpoints);
// Use like below
const Title = styled.h1`
font-size: 2.5em;
text-align: center;
color: palevioletred;
${mq({from: 'md'})`
font-size: 5em;
`}
`;
// A more advanced example
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
${mq({from: 'md', until: 'xlg', and: '(orientation: landscape)', mediaType: 'only screen'})`
background: red;
`}
`;
<Wrapper>
<Title>Hello World, this is my first styled component, with easy to use media queries!</Title>
</Wrapper>