我无法让媒体查询与媒体模板和样式组件一起使用。我直接从文档中定义了一个 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;

这是测试文件：

应用程序.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;

我期待的是 [桌面] 标题显示在大屏幕上，而 [移动] 标题显示在小屏幕上。

我得到的是相反的：我在大屏幕上看到两个标题，然后在缩小窗口时[移动]首先消失，然后是[桌面]。

我的目标是让一个且只有一个组件始终可见。我究竟做错了什么？