Importing CSS in one component is adding CSS affect to other Components. How and Why?

Question

I am from Angular Background and as far as I know. Each component has its own beauty and till we import a CSS file inside it those CSS classes should not be applied even if we add to HTML Elements to the component in case we have not added or imported any CSS files for classes used inside this new/2nd component .

What I did in React was made 2 components - Home1.js and Home2.js . When I am importing a css file named Home.css to Home1 Component and NOT to Home2.js component - How in the world is those CSS classes affect being applied even too Home2 Component . This is sheer absurd.

That's why I am importing someFile.css **specifically** to the component where I want its affect to be there . This provided a kind of encapsulation affect , which I am seeing is failing. Now, someone can explain me how in the world, wherever I am not importing someFile.css, there also the classes are having affect?

Home1.js

import React, { Component } from 'react';
import './home.css';

class Home1 extends Component {

  render() {
    return (
      <div>
          <div className="red">1...</div>
          <div className="green">2...</div>
          <button>click</button>
      </div>
    )

  }
}

export default Home1;

Home2.js

import React, {useState} from 'react';

const Home2 = () => {

  return (

    <div>
        <div className="red">1..</div>
        <div className="green">2...</div>
        <button>click</button>
    </div>
  )

}

export default Home2;

Result:

Answer 1

Angular does it through viewEncapsulation , but this notion does not exists in react. You either need to scope your css manually by adding a main class on the top node of your component, or use a library that can do it for you (haven't tried it, you can refer to @Abdelrhman Arnos comment).

Answer 2

In React, like someone already had commented, you need the CSS modules to handle your problem. Actually, it's already included in the css-loader , which is a very basic module you need for webpack to handle the CSS files in the bundling process. I am not sure if you build your React app from the ground up, but I am quite sure you already had this module in your project.

{
  loader: 'css-loader',
    ...
  options: {           
  // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
    modules: { auto: true },
  },
},

I believe you are an experienced web app programmer, and just complaining about the design of the React, but I would like to provide a little basic knowledge of browser rendering mechanism here for whom just start learning web programming and thinking about the same question.

The basic of the rendering engine in the browser is interpreting the HTML, XML documents. After loading assets by such as <script> , <style> . There are a couple of steps to complete the rendering . The step to apply CSS rules on pixels is Style calculations .

What browser does is very simple, it takes the CSS files, applies the rules, something about the scope of the styles really rely on the practice of library/framework, you can imagine that the best they can do is preprocessing the CSS files and add some unique properties to each CSS rules corresponding to the specific class names it can find in your code.

Where to import the CSS file is just for readability and maintainability. In the old times, when people still program web app with jQuery or pure JS, you just include the CSS file in the .html file, maybe it forces you to care about the naming of the classes and styles earlier, but actually we also have the same problems when you try to separate it for bigger projects.