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

Question

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

我在 React 中所做的事情是由 2 个组件组成的 - Home1.js 和 Home2.js。当我将 a css file named Home.css to Home1 Component 和 NOT 导入到 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 的地方，这些类也有影响吗？

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;

结果：

Answer 1

Angular 是通过 viewEncapsulation 来实现的，但是这个概念在 react 中并不存在。您要么需要通过在组件的顶部节点上添加一个主类来手动定义 css 的范围，要么使用可以为您执行此操作的库（尚未尝试过，您可以参考 @Abdelrhman Arnos 评论）。

Answer 2

在 React 中，就像有人已经评论过的那样，您需要 CSS 模块 来处理您的问题。实际上，它已经包含在css-loader 中，这是一个非常基本的模块，您需要 webpack 在捆绑过程中处理 CSS 文件。我不确定你是否从头开始构建你的 React 应用程序，但我很确定你的项目中已经有了这个模块。

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

我相信你是一位经验丰富的 web 应用程序程序员，只是抱怨 React 的设计，但我想在这里提供一点浏览器渲染机制的基本知识，供刚开始学习 web 编程并思考相同的人问题。

浏览器中渲染引擎的基础是解释 HTML、XML 文档。通过<script>、<style>等加载资产后。 There are a couple of steps to complete the rendering。将 CSS 规则应用于像素的步骤是样式计算。

浏览器所做的非常简单，它获取 CSS 文件，应用规则，关于样式范围的一些事情真的依赖于库/框架的实践，你可以想象他们能做的最好的事情就是预处理 CSS文件并为每个 CSS 规则添加一些独特的属性，这些属性对应于它可以在您的代码中找到的特定类名。

在哪里导入 CSS 文件只是为了可读性和可维护性。以前人们还在用 jQuery 或者纯 JS 编写 web 应用程序的时候，你只是将 CSS 文件包含在 .html 文件中，也许它迫使你更早地关心类和样式的命名，但实际上我们也当您尝试将其分离用于更大的项目时会遇到同样的问题。