Синтаксис медиазапроса для Reactjs

Question

Как выполнить следующий медиа-запрос CSS в Reactjs?

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

Я пробовал следующее, но он выдает синтаксическую ошибку и не компилируется.

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

Answer 1

Если у вас есть особые случаи, когда вам нужно получить результат медиа-запроса в приложении реагирования (например, вы хотите отобразить какой-либо компонент в мобильной версии), вы можете использовать такие помощники, как реагировать или hook-media-hook .

Answer 2

Вы не можете устанавливать медиа-запросы встроенными.Вам нужно будет создать отдельную таблицу стилей CSS и затем импортировать таблицу стилей.

, чтобы в новом файле styles.css, например, было бы следующее.

  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

Затем вы можете импортироватьновый файл стилей CSS в ваш файл реакции.Таким образом, вы можете добавить import './styles.css' в начало вашего App.jsx файла (при условии, что они оба находятся на корневом уровне), или вы можете импортировать его непосредственно в определенный файл компонента реакции.