导出默认App时，App.css中的代码是如何被包含进来的？

Question

我是 React 新手（也是 Javascript），我对渲染 React Component-> App 使用 'create-react-app' 生成的模板代码的输出有疑问.
这里是 App.js:

import React from "react";
import "./App.css";

export function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

export default App;

App.css:

.App {
  text-align: center;
  color: blue;
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


serviceWorker.unregister();

文件目录系统：

.
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── serviceWorker.js
    └── setupTests.js

在文件 App.js 中，export default App; 导出 App 然后在 index.js 中导入它使用 ReactDOM.render 渲染App。我很难理解 App.css 中的代码如何在 index.js 中得到 used/imported？毕竟只有 App 被导出（默认情况下），其中没有明显使用其中的任何 CSS 代码。我在这里遗漏或解释错误吗？
感谢阅读。
编辑：
具体来说，我想知道 React 如何将 CSS（导入的）应用于脚本中定义的组件？

Answer 1

即将发表您的声明：

I am having difficulty in understanding how the code in App.css gets used/imported in index.js?

其实你想知道，App.css中写的CSS代码是如何应用到App组件上的。答案很简单，这是因为你的 App.js 正在使用那个 CSS 文件，因为 App.css 被导入你的 App.js 文件

`import "./App.css";`

所有 CSS 首先应用于 App 组件，并且仅当您使用

在 index.js 中导入和渲染 App 时

ReactDOM.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>,
 document.getElementById('root')
);

React 渲染您的 App 组件以及 App.css 中提供的所有 CSS。

现在解决您的其他声明：

Afterall only App is getting exported (as default) which is not visibly using 
any CSS code inside it.

好吧，我不得不说，这不是一个正确的陈述，因为 App 组件使用 CSS 编写在 App.css 中。在您的 JSX 中，您返回了以下内容：

<div className="App">
  <h1>Hello</h1>
</div>

你看到了 className="App"，所以 App 这是你的 class selector 而 CSS 就是这个。

.App {
  text-align: center;
  color: blue;
}

在这里尝试使用任何其他 CSS 属性，您将看到反映的变化。

导出默认App时，App.css中的代码是如何被包含进来的？

How does the code in App.css gets included when exporting default App?

javascript

reactjs

javascript-import

css-import