Best way to write media query in reactJS

Question

For writing media queries in react Js which method would be considered most efficient and better quality wise. 1- Writing the media queries separability after defining each class ie

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

2- Or defining them at the end of all the classes

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

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

Also, what is the best practice for including CSS in react Js. Should I include external style sheet or write internal CSS for every component?

Answer 1

If you don't mind using external library I would suggest you to use react-responsive, which is pretty useful for me https://www.npmjs.com/package/react-responsive

Answer 2

I would prefer the second approach cause it is cleaner and not repetitive. One of the common CSS in js package is styled-components. Try it out