Javascript 导出默认应用程序时，App.css中的代码是如何包含的？

我对react（Javascript也是新手），在呈现react组件->

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;

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();

在文件

App.js

中，

导出默认应用程序

导出

App

，然后将其导入

index.js

中，后者使用

ReactDOM.render

渲染

App

。我很难理解

App.css

中的代码是如何在

index.js

中使用/导入的？毕竟，只有

App

会被导出（默认情况下），而这里面没有任何CSS代码。我在这里是不是遗漏了什么或是解释错了什么？
谢谢你的阅读。
编辑：

---

具体来说，我想知道React是如何将CSS（导入的）应用于脚本中定义的组件的？

下面是您的陈述：

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

组件，并且仅当您使用

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

我不得不说，这不是一个正确的说法，因为

App

组件正在使用

App.CSS

中编写的CSS。在JSX中，您返回了以下内容：

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

---

尝试在此处使用任何其他CSS属性，您将看到相应的更改。

谢谢您的回复。正如您所说：“所有的CSS首先应用于应用程序组件”，React如何“应用”CSS到组件？例如：如果我在我的脚本中导入多个css文件，那么React如何将css脚本应用于各种不同的组件（如果存在）？正如您所知，React是一个单页应用程序，在引擎盖下面，我们所有的组件都呈现在一个html文件中。现在Webpack（已经由react为我们设置）负责将所有CSS文件绑定到一个CSS文件中。最后它只是一个html文件和一个css文件。我们的类名在HTML文件中被更改为类，我们非常轻松地引用了CSS文件（1个CSS文件）任何其他疑问都会回信。

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

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

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

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