Как использовать медиа-печать в веб-приложении Reactjs

Question

Я хотел бы скрыть div, когда происходит предварительный просмотр, но я считаю, что это практически невозможно сделать в React.

<div className="contacts"></div>

Есть ли какие-либо возможности, которые я могу добавить в чистом CSS или если React Stylesheetподдерживает @ media print и скрывает элемент с контактами имени класса при предварительном просмотре печати. ​​

Я читал эту статью https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473, но мне кажется, что это слишком много работы для чего-то, что я хотел быделать плохо в CSS в течение нескольких секунд.

Есть идеи, как мне добиться этого в Reactjs?

Answer 1

Встроенные медиа-запросы невозможны.Самое близкое, что вы можете получить, это встроить таблицу стилей, вот так (в синтаксисе React):

<div className="contacts">
  <style>
    {`@media print {.contacts{display: none;}}`}
  </style>
</div>

Answer 2

Вы не можете использовать медиазапросы (также псевдоклассы и псевдоселекторы) внутри встроенных стилей.Вам нужно извлечь ваш CSS в отдельный .css файл и импортировать его либо в файл вашего компонента (если вы используете упаковщики, такие как веб-пакет), либо просто включить его в свой HTML с тегом <link>