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
– vinod, Commented Nov 30, 2022 at 16:27
@JayPonkia I added the package.json to bottom of my question — Ata Baris Akin
– Ata Baris Akin, Commented Nov 30, 2022 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. — user12348779
– user12348779, Commented Nov 30, 2022 at 16:56

Shakya Karunathilake · Accepted Answer · 2022-11-30 17:00:39Z

2

.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, 2022 at 17:00

answered Nov 30, 2022 at 16:23

Shakya Karunathilake

5452 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Ata Baris Akin Over a year ago

I tried this one as well but it's not working.

Shakya Karunathilake Over a year ago

can you please build code sand box so I could try different approach?

Shakya Karunathilake Over a year ago

it is saved in the same level as the js file? if not make sure to save it in the same level

Ata Baris Akin Over a year ago

I wrote that in my question yes they are saved at the same level

Ata Baris Akin Over a year ago

I did not use sandbox before but I hope this is correct. codesandbox.io/s/jovial-parm-orlfgh

|

storm · Accepted Answer · 2022-11-30 16:30:04Z

1

i used this method

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

then

 <div className={styles.SideBar}>

answered Nov 30, 2022 at 16:30

storm

6310 bronze badges

2 Comments

Ata Baris Akin Over a year ago

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?

Shakya Karunathilake Over a year ago

it's more like a best practice to use camelCase

Collectives™ on Stack Overflow

Importing CSS files in to React JS

2 Answers 2

15 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related