Reactjs 如何使用CSS媒体查询以JSX中的react组件为目标

我正在使用盖茨比创建一个博客，为了简单起见，我在主内容组件的右边有一个主内容组件和一个博客日志归档组件作为第二列。当使用CSS媒体查询移动屏幕尺寸时，如何将归档组件定位为“显示：无”

例如，下面是layout.js的一个片段：

const MainLayout = styled.main`
  font-family: Roboto, sans-serif;
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 40px;
  footer {
    padding-bottom: 30px;
    a {
      color: red;
    }
  }
`;

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <div>
        <Header siteTitle={data.site.siteMetadata.title} />
        <MainLayout>
          <div>{children}</div>

          <Archive />

          <footer>
            © {new Date().getFullYear()} / Built by Michael Henry with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </MainLayout>
      </div>
    )}
  />
);

什么也没发生。如果我将

组件包装为

，如下所示：

<div className="noMobile">
  <Archive />
</div>

我可以使归档组件消失，但是

现在位于页面顶部，与归档组件所在的右侧列相同。我想这可能与我的网格布局有关，但我想不出来。如果网格布局位于已设置样式的组件（

）中，如何在此媒体查询中选择要更改的网格布局

---

感谢

Inside Media Query target一个类，在该类中，您将隐藏该特定元素，如果您使用一个示例或您尝试过的代码详细阐述您的问题，以便针对您的实现提出建议，这将是非常棒的。如果您希望页脚保持静止，请在网格中给它一个明确的位置，即

页脚{网格列：1/2}

@DerekNguyen-非常感谢，这很有魅力！在Media Query target类中，您可以在其中隐藏特定元素，如果您用一个示例或您尝试过的代码详细说明您的问题，这样建议将针对您的实现。如果您希望页脚保持静止，请给出一个明确的提示t在网格中的位置，即

footer{grid column:1/2}

@DerekNguyen-非常感谢，这很有魅力！