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

Question

我是react的新手(也是Javascript(，在渲染react组件时，我对输出产生了怀疑->使用"create-react-app"生成的模板代码的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 {
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，然后将其导入到使用ReactDOM.render渲染App的index.js中。我很难理解App.css中的代码是如何在index.js中使用/导入的？毕竟，只有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组件使用的是用App.css编写的CSS。在您的JSX中，您已返回以下内容：

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

你看到的是className="App"，所以这里的App是你的class selector，它的CSS是这样的。

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

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