React doesn't render CSS styles-CodePudding

I faced a problem with React CSS. My server is picking up, but my CSS properties are not working on my component. How can I fix this problem? I tried many ways to figure it out but I didn't get a good response.

App.js file codes:

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 file codes:

.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;
}

I tried many ways to fix it but I didn't get a solution.

Current view on browser

CodePudding user response：

When you tried importing the CSS styles, you did import ... from ... whereas you should be doing import ./App.module.css only, that's because you're trying to import from from a CSS file, which isn't going to work.

CodePudding user response：

You need to change className="App" to className={styles.App}.

CodePudding user response：

I think it is due to the fact you are import styles as a module, but you are not using it anywhere. You can just directly import the CSS file like this: import "./App.module.css";. If you do want to use it as a module, simply use it like this (as an example):

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

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

Also, you have duplicate import statements:

import { ReactDOM } from "react";

import { useEffect, useState } from "react";

You can also remove ReactDOM import entirely as it is not being used anywhere. Or at least, not in the code you have provided.

CodePudding user response：

import styles from "./App.module.css"; You inport it but you did not use it. You are supposed to use it If it did not work, just use in HTML instead of JS, I usually use ：