2

我是反应新手（也是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;


应用程序.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;exportsApp然后被导入index.js其中用于ReactDOM.render渲染App. 我很难理解如何App.css使用/导入代码index.js？毕竟只是App被导出（默认），它没有明显地使用其中的任何 CSS 代码。我在这里遗漏或解释错误吗？
谢谢阅读。
编辑：
具体来说，我想知道 React 如何将 CSS（导入的）应用于脚本中定义的组件？

4

1 回答 1

1

来到你的声明：

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

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

`import "./App.css";`

所有的 CSS 都首先应用于App组件，并且只有在您使用时导入App和index.js渲染

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

React 会渲染你的App组件以及App.css.

现在解决您的其他声明：

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

好吧，我不得不说，这不是一个正确的说法，因为AppComponent 使用的是用App.css. 在您的 JSX 中，您返回了以下内容：

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

你看className="App"，App这就是你class selector的，CSS 就是这个。

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

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

于 2020-07-20T13:00:18.333 回答