Как настроить компоненты реагирования в JSX с помощью медиазапросов CSS - PullRequest
Новая
       41

Как настроить компоненты реагирования в JSX с помощью медиазапросов CSS

0 голосов
/ 24 апреля 2019

Я создаю блог с помощью Gatsby, и для простоты у меня есть компонент основного контента и компонент архива публикаций в блоге в качестве второго столбца справа от компонента основного контента. Как настроить таргетинг на компонент архива, чтобы он отображался «нет» при использовании медиазапроса 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>
    )}
  />
);

Если я выберу компонент <Archive> в медиа-запросе следующим образом: 

@media only screen and (max-width: 480px) {
  Archive {
    display: none;
  }
}

Ничего не происходит. Если я оберну <Archive> компонент с <div> примерно так: 

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

@media only screen and (max-width: 480px) {
  .noMobile {
    display: none;
  }
}

Я могу заставить компонент архива исчезнуть, но <footer> теперь находится вверху страницы в том же столбце справа, в котором находился компонент архива. Я думаю, что это может иметь какое-то отношение к моему макету сетки, но я не могу понять это. Как выбрать макет сетки для изменения в этом медиазапросе, если он находится в стилизованном компоненте (<MainLayout>)?

Спасибо

...