React 不渲染 CSS 样式

Question

我遇到了一个关于 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

Answer 1

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