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

MediaQueries.js

import { css } from "styled-ponents";

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-ponents";
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 ponents visible at all times. What am I doing wrong?

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

MediaQueries.js

import { css } from "styled-ponents";

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-ponents";
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 ponents visible at all times. What am I doing wrong?

• javascript
• reactjs
• media-queries
• styled-ponents

Share Improve this question Follow asked May 25, 2019 at 10:44 MerigMerig 2,01122 gold badges1515 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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;
  `}
`;