在 reactJS 中编写媒体查询的最佳方法答案

【问题标题】：Best way to write media query in reactJS在 reactJS 中编写媒体查询的最佳方法
【发布时间】：2020-08-19 17:53:20
【问题描述】：

对于在 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 
  }
}

另外，在 react Js 中包含 CSS 的最佳做法是什么？我应该为每个组件包含外部样式表还是编写内部 CSS？

【问题讨论】：

我认为这归结为偏好和在代码库中保持一致的方法。就个人而言，我更喜欢将所有媒体查询放在一起，因为这样可以更轻松地调试样式问题。

标签： javascript html css reactjs

【解决方案1】：

如果你不介意使用外部库，我建议你使用 react-responsive，这对我来说非常有用 https://www.npmjs.com/package/react-responsive

【讨论】：

【解决方案2】：

我更喜欢第二种方法，因为它更简洁且不重复。 js 包中常见的 CSS 之一是 styled-components。试试看

【讨论】：