styled-components-media-query

import { styled, css } from 'styled-components'
import MqInit from 'styled-components-media-query'

// initialize
const bp = {s: 400, sl: 500, m: 768, ml: 992, l: 1100}
const mq = MqInit({ bp })

// use like this
const ComponentStyled = styled.div`
 position: relative;
 ${mq('m')(css`
   position: absolute;
 `)}
 ${mq('l')(css`
   position: fixed;
 `)}
`

Parameters

• Default value __namedParameters: object = {}

  • bp: object

    • l: number

    • m: number

    • ml: number

    • s: number

    • sl: number

    • xl: number

    • xs: number

    • xxl: number

    • xxs: number

    • xxxl: number

    • xxxs: number

    • xxxxl: number

    • xxxxxl: number

    • xxxxxxl: number

  • type: string

Returns (Anonymous function)

A styled-component css string.

Parameters

• val: number | string | null | undefined

• bp: Ibp

Returns number