Как хайпово писать медиа запросы в react?

Question

[Юрий Иванов]

Какой-нибудь добряк может объяснить, как правильно писать медиа запросы в реакте?
1.создавать отдельный глобальный файл
2.создавать в компоненте файл с медиа запросами и туда бабахать медиа запросы
3.в файле стилей компонента
или как-то иначе
что считается хорошей практикой, если еще и пример скинете, буду ооооочень благодарен
и я вот так запросы пишу, мб опять же в реакте или вообще есть другая практика их написания

@media (max-width:990px) {
  .container {
    max-width: 750px ;
  }
  .hero {
    grid-template-columns: auto;
    justify-items: center;
    text-align: center;
  }
  .input {
    width: auto;
  }
  .user__profile {
    margin: 0 0 20px 0;
  }
  .pagination__text {
    margin: 0;
  }
  .user__repositories {
    margin: 0;
  }
}

@media (max-width:750px) {
  .container {
    max-width: 520px ;
  }
  .header {
    display: grid;
    justify-items: center;
    padding: 0 0 10px 0;
  }
  .header__logo {
    margin: 16px 0;
  }
  .pagination {
    display: grid;
    justify-content: center;
    row-gap: 10px;
  }
}

@media (max-width:520px) {
  .container {
    max-width: 320px ;
    padding: 0;
  }
  .hero {
    padding: 30px 0px;
  }
  .user-profile__img {
    max-width: 270px;
  }
  .pagination__list {
    display: block;
  }
  .user-profile__social {
    display: grid;
    justify-items: center;
  }
}

@media (max-width:320px) {
  .container {
    max-width: none;
  }
}

Comments

[Константин Артюшкевич]

А при чем тут реакт? Реакт никаких условий не накладывает на стили, поэтому можешь делать как хочешь. Я, например, придерживаюсь того, что медиа запросы пишу там, где это необходимо. Если необходимо на уровне компонента как-то менять его стили, то пишу в стилях компонента в том же файле, где остальные стили.

[Петр]

Мне чет кажется, что вместе с компонентом будет лучше.

Answer 1

[black1277]

Есть 3 способа подключить медиазапросы:
1 Прямо в HTML-документе

<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

2 Использовать правило import в CSS-файле
@import url(example.css) (max-width: 700px);

3 Директиву media в CSS-файле

@media (max-width: 700px) {
  /* Здесь прописывается CSS-правила */
}

Реакт позволяет использовать все эти способы. Поэтому, выбор остается за разработчиком. Если следовать идее разбивки кода на компоненты, то логичнее всего вставлять медиазапросы в стилях того компонента, который требует различного отображения.