Блог

Главная - Вопросы по программированию - Лучший способ написать медиа-запрос в ReactJS

Лучший способ написать медиа-запрос в ReactJS

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Какой метод для написания медиа-запросов в react Js будет считаться наиболее эффективным с точки зрения качества? 1- Запись возможности разделения медиа-запросов после определения каждого класса, т. е

 .class1{ 
   text-align: left;
   @media (max-width: 550px){
      text-align: center;
    }
 }
.class2{ 
    text-align: right;
    @media (max-width: 550px){
       text-align: center;
     }
  }

2- Или определять их в конце всех классов

 .class1{ 
    text-align: left 
 } 
 .class2{  
     text-align: right 
 }

 @media (max-width: 550px){
 .class1{  
    text-align: center
  } 
  .class2{ 
     text-align: center 
  }
}

Кроме того, какова наилучшая практика для включения CSS в react Js. Должен ли я включать внешнюю таблицу стилей или писать внутренний CSS для каждого компонента?

Комментарии:

1. Я думаю, это сводится к предпочтениям и поддержанию согласованного подхода в базе кода. Лично я предпочитаю хранить все медиа-запросы вместе, потому что это значительно упрощает отладку проблем со стилем.

Ответ №1:

Если вы не возражаете против использования внешней библиотеки, я бы посоветовал вам использовать react-responsive, что для меня довольно полезноhttps://www.npmjs.com/package/react-responsive

Ответ №2:

Я бы предпочел второй подход, потому что он более чистый и не повторяющийся. Одним из распространенных CSS в пакете js является styled-components. Попробуйте