Apl saya tidak menggunakan CSS yang disalin pada index.css dalam React

Question

Jadi saya mengikuti tutorial di Youtube tentang reactJS, youtuber memberitahu saya untuk mengimport fail CSS ke dalam index.css saya dan kemudian ia sepatutnya menunjukkan pemaparan tapak web dengan betul, namun, apabila saya menyalin CSS dan mengimport ke dalam saya App.js dan tiada apa-apa yang muncul dalam Index.js, adakah sesiapa tahu cara mengendalikan perkara ini? Adakah versi React mempunyai gaya yang berbeza? Adakah terdapat sebarang tetapan lain yang saya tiada?

Berikut ialah 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;
}

Ini App.js saya dan 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();

Akhir sekali, 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 hendaklah diimport ke dalam fail index.js. Jadi anda boleh memadamkan import secara terus dalam app.js.

Memandangkan anda menggunakan "./index.css" sebagai laluan untuk mengimport, anda perlu memastikan bahawa fail index.css berada dalam folder yang sama dengan index.js (saya rasa ia adalah folder src).