Media queries not working with styled components in React App

Question

I'm having trouble getting media queries to work with media templates and styled components. I defined a MediaQueries template straight from the docs:

MediaQueries.js

import { css } from "styled-components";

const sizes = {
  desktop: 992,
  tablet: 768,
  phone: 576
};

// Iterate through the sizes and create a media template
const media = Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (max-width: ${sizes[label] / 16}em) {
      ${css(...args)}
    }
  `;

  return acc;
}, {});

export default media;

And here's the test file:

App.js

import React from "react";
import styled from "styled-components";
import media from "./MediaQueries";

const Desktop = styled.h1`
  color: red;

  ${media.phone`
    display: none;
  `}
`;

const Mobile = styled.h1`
  color: blue;

  ${media.desktop`
    display: none;
  `}
`;

function App() {
  return (
    <div>
      <Mobile>Mobile</Mobile>
      <Desktop>Desktop</Desktop>
    </div>
  );
}

export default App;

What I'm expecting is for the [Desktop] title to be shown on large screens, and [Mobile] to be shown on smaller ones.

What I'm getting is the opposite: I get both titles on large screens, then while shrinking the window [Mobile] disappears first, then [Desktop].

My goal is to have one and only one of the components visible at all times. What am I doing wrong?

Answer 1

I think you got the rules mixed. If you want to toggle them based on size then one of them should start off with display:none, then you switch them.

Something similar to this:

const Desktop = styled.h1`
  color: red;

  ${media.phone`
    display: none;
  `}
`;

const Mobile = styled.h1`
  color: blue;
  display: none;
  ${media.phone`
    display: block;
  `}
`;