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 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. page load time 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 and . 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. first meaningful paint first interactive time 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 on your elements to attach your styles. className 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 tag. Note that are camelCased. style style keys <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 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). inline styling 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 being the main pros for Styled Components (and other CSS-in-JS implementations). powerful style manipulation with JS Styled Components are also CSS localized as in the case of CSS Modules. <p class=”sc-bwzfXH iofHNH”>Styled Components</p> Enjoy!
