CODEWITHSUNDEEP
javascriptcssreactjsmern
Ata Baris Akin
Ata Baris Akin

Reputation: 1

Importing CSS files in to React JS

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.

Upvotes: 0

Views: 4300

Answers (2)

Shakya Karunathilake
Shakya Karunathilake

Reputation: 535

.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

Upvotes: 2

storm
storm

Reputation: 63

i used this method

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

then

 <div className={styles.SideBar}>

Upvotes: 1

Related Questions