There are numerous ways to style your React App/Components with CSS. Each method has its pros/cons depending on the use case. This is a post that compares options with succinct code/output syntax/patterns.
Choosing the right method for your use case is rather complex problem if you are page load time conscious, because you have to consider many aspects as a whole, such as, page load time, load environment (Browser, In-App browser, Chat platform Webviews…), CSS code spliting, Webpack, CommonsChunkPlugin, ExtractTextWebpackPlugin, CSS Tree shaking, Service workers, Caching, your dev tooling… and the list goes on. Unfortunately, we are in a era of unnecessary complexity in front-end development where in the future many of these will hopefully be automated with build systems. For now, back to the reality.
If you have no pressure on page load time, perhaps you would not have to bother with many of these issues. However, if you are touching mobile, load time is an crucial issue and CSS is an important element.
Consider loading a Webview insinde a Messenger Chatbot, or loading a checkout page inside Facebook/Instagram after clicking an ad. You have to have a fast first meaningful paint and first interactive time. From the CSS load performance perspective, only required CSS must be loaded(inline or file), CSS minification/localization and caching must be considered along with all of the bundling settings described above. In this document, I will focus on ways on how to incorporate CSS in React, leaving the bundling configurations to a future article. But don’t forget, these two works in tandem.
Here is 5 ways to use CSS in React with concise example codes:
- Plain CSS Sytlesheet
- Inline Styling
- CSS-in-JS
- CSS Modules
- Styled Components
1. Plain CSS Sytlesheet
Just import your plain old CSS file and use className on your elements to attach your styles.
Note that your styles will not be localized to your component, it will be attached to your DOM elements as is (Globals problem!).
2. Inline Styling
Create your styles inline as JS objects and assign them with style tag. Note that style keys are camelCased.
<div style={YourStyle}>
You can also use the inline styling directly on your elements.
<p style={{fontSize:'15px', textAlign:'center'}}>
Final output differs depending on your build process.
Styles could be embedded inline (see below),
<p style="fontSize:15px; textAlign:center">
or split into the page header or a separate file.
3. CSS-in-JS
This is practically the same as inline styling except that style objects are kept in a separate JS module. For CSS localization and other enhancements, you would want to use an add-on library (E.g. Radium).
Details on how Inline Styles and CSS-in-JS compare? https://mxstbr.blog/2016/11/inline-styles-vs-css-in-js/
4. CSS Modules
CSS are kept in a CSS file as vanilla CSS. Import your CSS file into your React component and use on your elements/components with className={YourImportedComponent.YourCSSClass}.
Your styles will be localized and attached your DOM elements as below.
<p class=”_255BVABjBx_0DfMd8sZNVs”>CSS Modules</p>
More on CSS Modules, https://glenmaddern.com/articles/css-modules.
5. Styled Components
Styled Components (and its variants) is currently the most controversial method and resulted in formation of different camps on the subject. Styled Components vs CSS Modules. Each has its pros, with powerful style manipulation with JS being the main pros for Styled Components (and other CSS-in-JS implementations).
Styled Components are also CSS localized as in the case of CSS Modules.
<p class=”sc-bwzfXH iofHNH”>Styled Components</p>
Enjoy!