I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing appeared on the screen. Does anyone know how to fix this issue? Could it be that the styles are different for different versions of React? Am I missing any other setup steps?
Here is the content of 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, button, task styling, form controls etc..)
footer {
margin-top: 30px;
text-align: center;
}
And here is my implementation in 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';
(code for rendering components)
Lastly, here is the code snippet from App.js:
import Header from "./components/Header";
import Tasks from "./components/Tasks";
import './index.css';
function App() {
return (
(App component structure)
);
}
export default App