Importing CSS files in to React JS

Question

I was following a tutorial to learn to react. In this tutorial, they asked me to do an information page and add some styling to this page. When I hard coded the styles inside my index.js there will be no problem but when I want to use separate Style.css I can't import it. I don't know why. All files are on the same level.

import'./Style.css';

// Children Components
function Header() {
    return (
        <div>
            <header>
                <nav className="header">
                    <div><img src="images.png" width="80px"></img></div>
                    <div><h1>RedCloud</h1></div>
                    <div ><ul className="navitems">
                        <div ><li>Home</li></div>
                        <div ><li>Profile</li></div>
                        <div ><li>Movies</li></div>
                    </ul></div>
                </nav>
            </header>
        </div>
    )
}

//parent
function Page() {

    return (
        <div>
            <Header />
        </div>
    )

}
ReactDOM.render(<Page />, document.getElementById("root"));

For ReactDOM I am using CDNs which I am calling them in HTML file instead of importing them. And this is my CSS file.

.header {
    display: "flex";
}

.navitems{
    display: "flex";
    list-style: none;
    justify-content:'space-between';
}

.navitems > div{
    padding:"10px";
    justify-content:'space-between';
}

I don't know why but it seems like I can not import Style.css. And below I added my HTML file for extra. Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/Style.css">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
</head>
<body>
    <div id="root"></div>
    <script src="index.js" type="text/babel"></script>
</body>
</html>

{
  "dependencies": {
    "css": "^2.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "css-loader": "^6.7.2",
    "style-loader": "^3.3.1"
  }
}

I double checked the file name, pathing, unsaved files and correct naming of the attributes.

how did you created the project? are you using CRA or any other ways? — vinod, Nov 30 '22 at 16:27
@JayPonkia I added the package.json to bottom of my question — Ata Baris Akin, Nov 30 '22 at 16:53
Have you tried checking if your CSS is being applied? Try clearing your browser cache and inspect to check if the styles are being applied on the elements. — Harley Swift, Nov 30 '22 at 16:56
Can you please do one thing? Copy your code and paste it over here - https://jsfiddle.net/boilerplate/react-jsx — Jay Ponkia, Dec 01 '22 at 06:03

Shakya Karunathilake · Answer 1 · 2022-11-30T17:00:39.097

1

.app {
  font-family: sans-serif;
  text-align: center;
  background-color: aqua;
}

import "./styles.css";

export default function App() {
  return (
    <div className="app">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

PS: I would suggest using SCSS instead of CSS since it has more advanced and modified features and look into the best practices when it comes to coding. It will greatly help you out in the future

Referred Links: How to import a CSS file in a React Component

edited Nov 30 '22 at 17:00

answered Nov 30 '22 at 16:23

Shakya Karunathilake

495
2
6
13

I tried this one as well but it's not working. – Ata Baris Akin Nov 30 '22 at 16:28
can you please build code sand box so I could try different approach? – Shakya Karunathilake Nov 30 '22 at 16:29
it is saved in the same level as the js file? if not make sure to save it in the same level – Shakya Karunathilake Nov 30 '22 at 16:29
I wrote that in my question yes they are saved at the same level – Ata Baris Akin Nov 30 '22 at 16:34
did u try import * as styles from 'style.css';? @AtaBarisAkin – Shakya Karunathilake Nov 30 '22 at 16:34
Yes, still the same nothing happens – Ata Baris Akin Nov 30 '22 at 16:38
sand box link please – Shakya Karunathilake Nov 30 '22 at 16:38
try import './styles.css';. – Shakya Karunathilake Nov 30 '22 at 16:39
https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component – Shakya Karunathilake Nov 30 '22 at 16:40
1

I did not use sandbox before but I hope this is correct. https://codesandbox.io/s/jovial-parm-orlfgh – Ata Baris Akin Nov 30 '22 at 16:45
updated the answer please check @AtaBarisAkin – Shakya Karunathilake Nov 30 '22 at 16:54
I updated the sandbox link. This was not my code snippet. – Ata Baris Akin Nov 30 '22 at 17:42
You are doing a react js project, right? can u please send me the youtube link u are following? as far as I know u are suppose to make changes in the App.js file. not the index.js – Shakya Karunathilake Nov 30 '22 at 17:59
in the tutorial, he uses scrimba, which helps with many things and some auto-fixing. But I am trying to use VS code as my code editor. He didn't even import the CSS file he created. – Ata Baris Akin Nov 30 '22 at 18:25
https://www.youtube.com/watch?v=bMknfKXIFA8&ab_channel=freeCodeCamp.org this is the link of the tutorial I am at 1:23:00 – Ata Baris Akin Nov 30 '22 at 18:26

score 1 · Answer 2 · answered Nov 30 '22 at 16:30

1

i used this method

import styles from './Dashboard.module.css';

then

 <div className={styles.SideBar}>

answered Nov 30 '22 at 16:30

storm

43
8

Unfortunately, this did not work as well but I have a question. Is there a reason you to make UpperCase to your className like S ide B ar? – Ata Baris Akin Nov 30 '22 at 16:36
it's more like a best practice to use camelCase – Shakya Karunathilake Nov 30 '22 at 16:36

Importing CSS files in to React JS

2 Answers2