What Is the Best Way to Style React Components? 4 Most Widely-Used Approaches to Styling

Sorry to disappoint you, but: there's no such thing! No such thing as “the best way to style React components”. Or “the most effective approach” or “the currently best option” for styling reusable components within your application.

What you do have, instead, is:

“The most popular or commonly-used ways of styling components!”

4 of them, actually.

And rating one of these approaches as “the best” is totally up to you:
 

• to your personal preferences
• to your React app's level of complexity
• to what precisely it is that you need to style in your React project
• and to your feature needs
   

Is it just a few style properties that you need to add? Then the inline styling approach suits your “component styling scenario” perfectly.

Or maybe it's a more complex React app that you're working on? In this case, you might want to go for the classic approach: using CSS classes and stylesheets and tying them all together with webpack. 

But let's just put each of the 4 popular ways of styling React components into the spotlight and clear the picture for you a bit more!

I'll be highlighting each option's main advantages and drawbacks, so you can knowingly decide which one's the best option for you.
 

1. The Classic Approach: Using Regular CSS Stylesheets 

You always have classes and stylesheets to rely on when it comes to styling. Simply tie them all with webpack after you've imported CSS file:

import './DottedBox.css' 

… ensuring, this way, that you have a separate CSS file for each one of the components to be styled.

The main advantages of this common approach?
 

• it'll then be easier for you to move between your CSS and the browser
• it will streamline overriding or MVT in case you'll need to go in that direction
   

Yet, there's also a bit discouraging drawback to this approach to styling React components:

Do expect to face all the “standard” CSS problems: potential conflicts between definitions and mutual classes, attribute inheritance (both good and... bad)...
 

2. CSS Modules 

And before we delve into the:
 

• “why” you might rate using CSS modules as “the best way to style React components”
• “how” to leverage their styling capabilities
   

... let us try to define them:

They're CSS files where all animation and all class names get automatically scoped.
Moroever, CSS modules help you “keep things clean” when it comes to all the previously mentioned problems that CSS stylesheets can challenge you with.

They make the most efficient approach to styling React components when you're dealing with complex applications.

And now, here are the steps to take for styling your reusable components using CSS modules:
 

1. import CSS file: import styles './DashedBox.css'
2. next, access className as you access to the object
    

And here you have 2 options at hand:
 

1. :local(.className) if/when you opt for create-react-app due to webpack configurations
2. .className in case it's your own React boilerplate that you're using 
    

“OK, but how do I make my CSS modules work with Webpack now?”

A legitimate question that you might be asking yourself right now.

Here's how:
 

• you simply include the modules early mentioned
• next add the loader here below to your webpack.config.js file:

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

3. Styled Components: Is This the Best Way to Style React Components?

“It is if working with class names to compose stylesheets is not really... your thing.”

Take it as a more “non-traditional” way of styling components, where you:

Create encapsulated styles and integrate them with the props of your components. In other words: instead of using className, you'd be using style attribute.

And styled-components — a JavaScript and CSS “combo —  are no more than a library enabling you to use component-level styles within your React app. 

Or, you can also see them as a “wrapper component”: mapped to HTML tags in order to style itself and its child elements.

This way, you can easily write regular CSS in your JS file. 

The main advantages?
 

• you get to store all the styling within the component 
• … to have separate and reusable UI for your React stateful/stateless components
• … to build “isolated” components 
   

And now, let me take you through all the steps required for leveraging this library's styling capabilities:
 

1. fist, just install the library itself: npm install styled-components –save
2. next, set up a variable by selecting a specific HTML element, to store your style keys const Div = styled.htmlElemnet`color: pink` 
3. and finally, use that variable's name as a wrapper <Div></Div> type of React component 
    

 4. Inline Styling 

This might just be the best way to style React components for you if it's only a few style properties that you need to add.

Don't expect for inline styles to be specified as a string in React: 

They're not! Instead, they're mentioned with an object:

• whose key is the style name's camelCased version
• whose value is usually a string, the style's own value, actually
   

And you have 2 options at hand for “triggering” the styling capabilities with this approach:
 

1. you create a variable storing style property and get it sent through to the element like style={nameOfvariable}
2. you pass the styling — style={{color: 'pink'}} — directly
    

Still, don't get overly “enthusiastic” about using this approach to styling! At least not until you've taken note of all the challenges that it presents, as well (and there are quite a few):

 

• you won't be able to use pseudo-classes, one of the core features of CSS (:active, :hover, :focus etc.)
   
• expect duplication in markup each time you'll use a specific component: you won't be having your styles in your JS only, meaning that doing server-side rendering will lead to duplication, to using repetitive rules and the same style code for multiple components
   
• you won't get any media queries: you're left with the solution of using a JS approach for “juggling with” different screen variations
   
• and you can't use vendor prefixes, nor override a rule on the very same selector
  
   

In a few words: using inline styling might just not be the best way to style React components if:

... It's a UI-heavy, complex application that you're working on and this is due to the approach's highly restrictive usage.

Nevertheless, if you still consider that this option suits your preferences and your app's feature needs best, go for it! You could always use a library such as React JSS, Readium, React style to deal with the above-mentioned inline styling limitations.

The END! These are 4 most widely-used ways of styling components in React, along with their key benefits and their most discouraging drawbacks.

Which one would you rate as “the best way to style React components” according to your personal preferences and to your current app's “needs” in terms of styling capabilities?