javascript - デフォルトのアプリをエクスポートするときに、App.css のコードはどのように含まれますか?

Question

私は反応するのが初めてです（Javascriptも）、App「create-react-app」を使用して生成されたテンプレートコードのReact Component->をレンダリングするときの出力に関して、この疑問を抱きました。
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使用されます。のコードが でどのように使用/インポートされるのか理解できません。結局、内部のCSSコードを目に見えて使用していない（デフォルトとして）エクスポートされるだけです。ここで何か間違ったことを見逃しているか、解釈していますか? 読んでくれてありがとう。 編集: 具体的には、React がスクリプトで定義されたコンポーネントに (インポートされた) CSS をどのように適用するか知りたいですか?ReactDOM.renderAppApp.cssindex.jsApp