NodeJS React不呈现CSS样式

bjg7j2ky 于 2022-12-03 发布在 Node.js

关注(0)|答案(4)|浏览(179)

我遇到了一个React CSS问题。我的服务器正在恢复，但是我的CSS属性在我的组件上不起作用。我该如何解决这个问题？我尝试了很多方法来解决这个问题，但是我没有得到很好的回应。
App.js文件代码：

import styles from "./App.module.css";
import { ReactDOM } from "react";

import { useEffect, useState } from "react";
import { init, subscribe } from "./socketApi";
import Palatte from "./components/Palatte";

function App() {
  const [activeColor, setActiveColor] = useState("#282c34");

  useEffect(() => {
    init();

    subscribe((color) => {
      setActiveColor(color);
    });
  }, []);

  return (
    <div className="App" style={{ backgroundColor: activeColor }}>
      <h1>{activeColor}</h1>
      <Palatte activeColor={activeColor} />
    </div>
  );
}

export default App;

CSS文件代码：

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.palette {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.palette button {
  margin-top: 10px;
}

我尝试了很多方法来解决它，但我没有得到一个解决方案。
Current view on browser

node.js

来源：https://stackoverflow.com/questions/74661141/react-doesnt-render-css-styles

4条答案

按热度按时间

tag5nh1u1#

当你尝试导入CSS样式时，你做了import ... from ...，而你应该只做import ./App.module.css，这是因为你试图从CSS文件导入import from，这是行不通的。

赞(0）回复(0）举报 2022-12-03

pgx2nnw82#

您需要将className="App"更改为className={styles.App}。

赞(0）回复(0）举报 2022-12-03

1cosmwyk3#

我想这是因为你导入styles作为一个模块，但你没有在任何地方使用它。你可以直接导入CSS文件，如下所示：import "./App.module.css";。如果您确实想将其用作模块，只需按如下方式使用（作为示例）：

const App = () => {
  const [activeColor, setActiveColor] = useState("#282c34");

  return (
    <div className={styles.App}>
      <h1>{activeColor}</h1>
    </div>
  );
};

此外，您还有重复的import陈述式：

import { ReactDOM } from "react";

import { useEffect, useState } from "react";

你也可以完全删除ReactDOM导入，因为它没有在任何地方使用。或者至少，没有在你提供的代码中使用。

赞(0）回复(0）举报 2022-12-03

7z5jn7bk4#

从“./App.module.css”导入样式;你导入了它，但你没有使用它。你应该使用它如果它不工作，只是在HTML中使用，而不是JS，我通常用途：

赞(0）回复(0）举报 2022-12-03

我来回答

NodeJS React不呈现CSS样式

4条答案

相关问题

热门标签

最新问答