What is the best practice to write styles in reactjs (px or %) or any other way

Question

I need to write the styles for reactjs. What is the best practice to write the styles.

Answer 1

What is better unit for % or px in react.js?

You can use those unit in variety ways. If you want to set small margin for elements, it's better to use px unit. If you want to locate div for following responsive way, % unit is best way.

Totally, it's better to use % unit for responsive and for px unit is good for small margin or padding, or button size.

I hope it will help to understand % and px unit

Answer 2

If I got you correctly,

You can write the styles in reactjs using several ways.

• Approach 1::

  Simply Declare an object like styles = {margin : 0 auto,padding:10px 20px,....}

  Now use this object in your jsx like

  <div style={style} >
             .....
   </div>
  

  like this, you can declare as many objects as you can.

• Approach 2::

  Using a .css file in your Project.

  If you watch Your Project File structure there is a file called App.css. Simply you can declare your classes there and use them in jsx.

• Approach 3::

  Inline Styling::

  This Approach works like the inline CSS mechanism we use in CSS

  <div style={{text-align:center,background-color : #eee }} >
       ......
  

*Note:: Always Remember we pass an object to style prop for an element in jsx.

Besides these three approaches, there are other concepts like pseudo-classes in CSS.

Please Go through A library called radium to know more about how to use these pseudo-classes for the reactjs components.