Styling Best Practices Using React

Photo by Pankaj Patel on Unsplash

One of the most enjoyable parts of working on the web is that you get to work in such a visual medium. I big part of the visual aspect is obviously the way it looks. Styling a web page has come along way from its early roots of adding markup and attributes to change things like fonts and colors, to Cascading Style Sheets of today. Now in our world of Web applications and JS Frameworks, the web has evolved and so have best practices. This is especially true when working in a framework like React.

How Does One “Style” Your Web Page Using React?

React, on its own and without any other tool, support two ways to style elements: the style prop, the style tag, and CSS style sheets. The style prop takes a JS object of CSS properties and values and ultimately translates that to inlines styles of an element, like this:

// JSX
<div style={{ color:'red'}}>
   Red Text
</div>
 
//DOM 
<div style="color:red;">
   Red Text
</div>

Since it’s just inline styles, you still get the highest specificity but you are limited on what you have access to style.

The style tag and CSS style sheets work just the same as working with pure HTML markup. The biggest difference is that you have to use theclassName prop instead of class. Both the id prop and className prop take either a…