
We’re excited to hear your project.
Let’s collaborate!
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:
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.
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?
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)...
And before we delve into the:
... 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:
And here you have 2 options at hand:
“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:
. . . { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' } . . .
“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?
And now, let me take you through all the steps required for leveraging this library's styling capabilities:
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:
And you have 2 options at hand for “triggering” the styling capabilities with this approach:
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):
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?
We’re excited to hear your project.
Let’s collaborate!