My app doesn't apply copied CSS to index.css in React

Question

So I am following the tutorial on Youtube about reactJS, the youtuber told me to import the CSS file into my index.css and then it should display the rendering of the website correctly, however, when I copy the CSS and import it into my App Nothing pops up in .js and Index.js, does anyone know how to deal with this? Does the React version have a different style? Are there any other settings I'm missing?

Here is index.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
}

.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}

.task {
  background: #f4f4f4;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

.task.reminder {
  border-left: 5px solid green;
}

.task h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-form {
  margin-bottom: 40px;
}

.form-control {
  margin: 20px 0;
}

.form-control label {
  display: block;
}

.form-control input {
  width: 100%;
  height: 40px;
  margin: 5px;
  padding: 3px 7px;
  font-size: 17px;
}

.form-control-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-control-check label {
  flex: 1;
}

.form-control-check input {
  flex: 2;
  height: 20px;
}

footer {
  margin-top: 30px;
  text-align: center;
}

This is my App.js and Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

Finally, App.js:

import Header from "./components/Header";
import Tasks from "./components/Tasks";
import './index.css';


function App() {
  return (
    <div className="Container">
      <Header title='Orpheus Research'/>
      <Tasks />
    </div>
  );
}

export default App

Answer 1

index.css should be imported into the index.js file. So you can directly delete the import in app.js.

Since you are using "./index.css" as the path to import, you need to make sure that the index.css file is in the same folder as index.js (I think it is the src folder).