5 approaches to styling React components in a single application

Good day, friends!



Today I want to talk to you about styling in React.



Why is this question relevant? Why are there different approaches to working with styles in React?



When it comes to markup (HTML), React puts JSX (JavaScript and XML) at our disposal. JSX allows you to write markup in JS files - this technique can be called "HTML-in-JS".



However, when it comes to styles, React doesn't provide any special tools (JSC?). Therefore, every developer is free to choose such tools to their liking.



In total, there are 5 approaches to styling React components:

• Global styles - all styles are contained in one file (e.g. index.css)
• CSS- — (, «css»); CSS- ( index.css) "@import"
• «» CSS- ( React-; «» , «css-modules» React, .. , , «create-react-app») — «Component.module.css», «Component» — (, ); JS- , (: import styles from './Button.module.css'; <button style={styles.button}> </button>)
• («») — «style» (, <button style={{ borderRadius: '6px'; } }> </button>)
• «CSS--JS» — , CSS JS-; «styled-components»: import styled from 'styled-components'; const Button = styled`- css`; <Button> </Button>

In my opinion, the best solution is the latter approach i.e. CSS-to-JS. It looks the most logical in terms of describing the structure (markup), appearance (styles) and logic (script) of the component in one file - we get something like All-in-JS.



A cheat sheet on using the "styled-components" library can be found here . You might also be interested in taking a look at the Hook Cheat Sheet .



Well, the worst approach in my opinion is inline styles. It's worth noting, however, that defining styled objects before defining a component and then using those objects is similar to CSS-in-JS, but there are still camelCase, style attributes, and inline styles that make it difficult to inspect the DOM.



Here's a simple React counter application that consistently uses all of these styling approaches (with the exception of inline styles).



The source code is GitHub .



Sandbox:





The application looks like this: The







application consists of three components: Title - the title, Counter - the counter value and information about whether the number is positive or negative, even or odd, Control - a control panel that allows you to increase, decrease and reset the counter value.



The structure of the project is as follows:

|--public
  |--index.html
|--src
  |--components
    |--Control
      |--Control.js
      |--Control.module.css
      |--package.json
      |--styles.js
    |--Counter
      |--Counter.js
      |--Control.module.css
      |--package.json
      |--styles.js
    |--Title
      |--Title.js
      |--Title.module.css
      |--package.json
    |--index.js
  |--css
    |--control.css
    |--counter.css
    |--title.css
  |--App.js
  |--global.css
  |--index.js
  |--nativeModules.css
  |--reactModules.css
...

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Let's go through some of the files in the "src" directory:

• index.js - JavaScript entry point (in the terminology of "bundlers") where global styles are imported and the "App" component is rendered
• App.js is the main component where the Control, Counter and Title components are imported and merged
• global.css - global styles, i.e. styles of all components in one file
• nativeModules.css — , CSS- «css» (control.css, counter.css title.css)
• reactModules.css — «» CSS-
• components/Control/Control.js — «Control» ( / CSS-, c «» CSS- ),
• components/Control/Control.module.css — «» CSS- «Control»
• components/Control/styles.js — «Control» ( , )
• components / Control / package.json - file with "main": "./Control", which makes it easier to import a component (instead of import Control from './Control/Control' you can use import Control from './Control'
• components / index.js - re-export, allowing you to import all components at once into App.js

As always, I will be glad to receive any feedback.



Thank you for your attention and have a nice day.