React组件CSS样式不生效问题求助（附代码示例）

核心问题分析 #

• CSS Modules使用错误：你导入了App.module.css作为styles对象，但JSX中仍用字符串className="App"引用类名，而CSS Modules会对类名进行哈希处理，必须通过styles对象访问才能匹配到正确的样式类。
• 子组件样式未正确引用：CSS中的.palette类需要在Palatte组件中同样以CSS Modules的方式引用，否则样式无法作用到子组件元素。

修改后的代码示例 #

App.js

import styles from "./App.module.css";
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={styles.App} style={{ backgroundColor: activeColor }}>
      <h1>{activeColor}</h1>
      <Palatte activeColor={activeColor} />
    </div>
  );
}

export default App;

Palatte组件（对应Palatte.module.css）

import styles from "./Palatte.module.css";

function Palatte({ activeColor }) {
  // 此处添加组件逻辑
  return (
    <div className={styles.palette}>
      {/* 按钮等元素 */}
      <button>颜色按钮示例</button>
    </div>
  );
}

export default Palatte;

补充说明 #

如果不需要使用CSS Modules，可将CSS文件后缀改为.css，并直接导入：

import "./App.css";

此时JSX中可直接使用className="App"引用类名。

内容的提问来源于stack exchange，提问作者Fikret AKBAŞ