javascript - 在一个组件中导入 CSS 就是将 CSS 影响添加到其他组件。如何和为什么？

Question

我来自 Angular Background据我所知。每个组件都有自己的美丽，直到我们import a CSS file inside it即使我们将 HTML 元素添加到组件 in case we have not added or imported any CSS files for classes used inside this new/2nd component，也不应应用这些 CSS 类.

我在 React 中做了什么由 2 个组件组成 - Home1.js和 Home2.js .当我导入 a css file named Home.css to Home1 Component和 不是 至Home2.js component - 这些 CSS 类到底是如何影响应用的 even too Home2 Component .这太荒谬了。

这就是我要导入 someFile.css **specifically** to the component where I want its affect to be there 的原因.这提供了一种encapsulation affect ，我看到它失败了。现在，有人可以向我解释一下，在我不导入 someFile.css 的地方，这些类也有影响吗？

首页1.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;

主页2.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;

结果:

Answer 1

Angular 通过 查看封装 ，但是这个概念在react中不存在。您要么需要通过在组件的顶部节点上添加一个主类来手动定义 css 的范围，要么使用可以为您完成的库(尚未尝试过，您可以引用 @Abdelrhman Arnos 评论)。