Hi guys ! 🤗

Next article about React JS! Last week we talked about How to build a complete Modal Component with React Hooks.

This week, let's discover a little trick that will allow you to scope your css/scss/sass in your React JS application.

In order to solve the problem of css encapsulation, there are two main approaches, css-modules and CSS-in-JS.
However, both of them have a very very big problem. The developer experience is not good, by which I mean you often have to write more code than you expect to achieve a simple style.

React SCSS Scoped — Created with meme-studio.io

With react-scoped-css created by @gaoxiaoliangz, you can just write the normal css you know, while having the advantage of css encapsulation!

React Scoped CSS

How does it work ?

Usually, you import your global style file in your React application, or you use a css file by component if like me you like to be rigorous. But the problem with this second approach is that your style is not scoped.

The scoped CSS allows you to targets a specific element and its children without any impact on other component.

Installation:

With create-react-app

Since create-react-app doesn't allow you to change webpack and babel config. So in this scenario, you have to use craco to override webpack config. Luckily you don't have to do it manually, just use a simple craco plugin.

Setup craco following this guide



# npm i craco-plugin-scoped-css --dev

Then, create a craco.config.js in your project root and add this code:



module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css')
    }
  ]
}

Without create-react-app

You have to add one babel plugin and one webpack loader.



# npm i babel-plugin-react-scoped-css --dev

And in your babel config:



plugins: ["babel-plugin-react-scoped-css"]

Usage:

Just create your component and import your stylesheet. The css filename must be like [name].scoped.css (or .scss/.sass). But you can define your own matching rule (.scoped.css, .local.scss, ...) in the plugin configuration.

Your css (or scss/sass):

Result

As you can see in the html above, component with scoped css file imported has a unique data-v-<hash> attribute.

The css selector also has a corresponding hash like selector[data-v-<hash>]. So all the styles in home.scoped.css are scoped to Home.jsx.

Architecture

One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. So here, let's group our JS and scoped css in a folder for one component!