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

Question

I am new to react (Javascript as well), I got this doubt reagarding the output when rendering the React Component-> App of the template code generated using 'create-react-app'.
Here is the 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();

File directory system :

.
├── 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

In the file App.js , export default App; exports App which is then being imported in index.js which uses ReactDOM.render to render the App. I am having difficulty in understanding how the code in App.css gets used/imported in index.js? Afterall only App is getting exported (as default) which is not visibly using any CSS code inside it. Am I missing or interpreting something wrong here?
Thanks for reading.
Edit :
Specifically, I want to know how does React applies CSS (which are imported) to the components defined in a script?

Imran Rafiq Rather · Accepted Answer · 2020-07-20T13:07:37.087

Coming to your statement:

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

Actually, You want to know, how the CSS code written in App.css is applied to App Component. The answer is straight forward, It is because your App.js is using that CSS file since App.css is imported in your App.js file

`import "./App.css";`

All the CSS is first being applied to App Component and only when you import and Render App in index.js using

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

React renders your App component along with all the CSS that is provided in App.css.

Now addressing your other statment:

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

Well I have to say, this is not a right statement as App Component is using CSS written in App.css. In your JSX you have returned the following:

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

You see className="App", so App here is your class selector and the CSS for this is this.

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

Try using any other CSS property here and you will see the changes reflecting.

Thanks for the reply. As you have said : "All the CSS is first being applied to App Component", how does React "applies" css to components? Ex : If I am importing multiple css files in my script, then how does React applies the css scripts to various different components (if present)? — noobron, Jul 20 '20 at 17:09
As you know React is a single page application, underneath the hood all our components are rendered in 1 html file in the
. Now Webpack (which is already setup by react for us ) takes care of bundling all the CSS files into one CSS file. In the end it is just 1 html file and 1 css file. our className gets changed into class in our HTML file, and we refer to our CSS file (1 CSS file) quite comfortably. :) Any other doubts do write back. — Imran Rafiq Rather, Jul 20 '20 at 17:52

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

1 Answers1