Proposal to use styled-media-query over custom media queries

[PaulRBerg]

The styled-media-query package simplifies media query management in a Typescript-based React project that uses styled-components.

The current implementation:

• Lots of any types
• Makes for a verbose API when used in a component: ${props => props.theme.mediaWidth.upToMedium

Compare it with styled-media-query:

import styled from "styled-components"; // You need this as well
import media from "styled-media-query";

const Box = styled.div`
  background: black;

  ${media.lessThan("medium")`
    /* screen width is less than 768px (medium) */
    background: red;
  `}
`}

The default values for "medium", "small", etc., can be configured like this:

const customMedia = generateMedia({
  desktop: "78em",
  tablet: "60em",
  mobile: "46em"
});