在 reactJS 中編寫媒體查詢的最佳方式

Question

對於在 react Js 中編寫媒體查詢，哪種方法將被認為是最有效和質量更好的。 1-在定義每個 class 后編寫媒體查詢可分離性，即

.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 
  }
}

此外，在反應 Js 中包含 CSS 的最佳實踐是什么？ 我應該為每個組件包含外部樣式表還是編寫內部 CSS？

Answer 1

如果您不介意使用外部庫，我建議您使用 react-responsive，這對我來說非常有用https://www.npmjs.com/package/react-responsive

Answer 2

我更喜歡第二種方法，因為它更干凈且不重復。 js package 中常見的 CSS 之一是 styled-components。 試試看