将 CSS 个文件导入 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.当我在 index.js 中硬编码 styles 时不会有问题，但是当我想使用单独的 Style.css 时，我无法导入它。 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.对于 ReactDOM，我使用 CDN，我在 HTML 文件中调用它们而不是导入它们。 And this is my CSS file.这是我的 CSS 文件。

.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.我不知道为什么，但似乎无法导入 Style.css。 And below I added my HTML file for extra.在下面我添加了我的 HTML 文件作为额外的。 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.我仔细检查了文件名、路径、未保存的文件和属性的正确命名。

Answer 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. PS：我建议使用 SCSS 而不是 CSS，因为它具有更高级和经过修改的功能，并在编码方面研究最佳实践。 It will greatly help you out in the future对你以后的出路有很大的帮助

Referred Links: How to import a CSS file in a React Component参考链接： How to import a CSS file in a React Component

Answer 2

i used this method我用这个方法

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

then然后

 <div className={styles.SideBar}>

将 CSS 个文件导入 React JS

问题描述

2 个解决方案

解决方案1
1 2022-11-30 16:23:45

解决方案2
1 2022-11-30 16:30:04

将 CSS 个文件导入 React JS

问题描述

2 个解决方案

解决方案1 1 2022-11-30 16:23:45

解决方案2 1 2022-11-30 16:30:04

解决方案1
1 2022-11-30 16:23:45

解决方案2
1 2022-11-30 16:30:04