Медиа-запросы не работают со стилизованными компонентами в приложении React

Question

У меня проблемы с получением медиазапросов для работы с медиа шаблонами и стилизованными компонентами. Я определил шаблон MediaQueries прямо из документов:

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;

А вот и тестовый файл:

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;

Я ожидаю, чтобы заголовок [Desktop] отображался на больших экранах, а [Mobile] - на меньших.

То, что я получаю, является противоположным: я получаю оба заголовка на больших экранах, затем при уменьшении окна сначала исчезает [Мобильный телефон], затем [Рабочий стол].

Моя цель - постоянно видеть один и только один из компонентов. Что я делаю не так?

Answer 1

Я думаю, вы перепутали правила.Если вы хотите переключать их в зависимости от размера, то один из них должен начинаться с display:none, затем вы переключаете их.

Что-то похожее на это:

const Desktop = styled.h1`
  color: red;

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

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