NextJS+MobX环境下切换元素className不生效问题求助

问题根源 #

你的代码存在三个关键问题：

1. CSS Modules 使用错误：直接写原始类名（如'isChosen'）无法匹配CSS Modules生成的唯一类名，必须通过导入的styles对象调用对应属性。
2. 模板字符串语法错误：第二个写法里的{styles.isChosen}多套了一层大括号，属于语法错误。
3. MobX响应式未生效：组件未用MobX的observer包裹，导致store状态变化时组件不会重新渲染。

修正后的完整代码 #

1. Example.tsx（核心修正） #

import { observer } from 'mobx-react-lite'; // 导入observer
import styles from './Example.module.scss'; // 导入CSS Modules样式
import exampleStore from './ExampleStore';

// 用observer包裹组件，确保状态变化触发重渲染
const Example = observer(() => {
  return (
    <div 
      className={exampleStore.isChosen ? styles.isChosen : styles.isNotChosen}
      onClick={() => {
        exampleStore.isChosen = !exampleStore.isChosen;
      }}
    >ELEMENT</div>
  );
});

export default Example;

2. ExampleStore.ts（无需修改，但确保MobX配置正确） #

import { observable } from 'mobx';

class ExampleStore {
  @observable
  isChosen: boolean = false;
}

// 单例导出store
const exampleStore = new ExampleStore();
export default exampleStore;

3. Example.module.scss（保持不变） #

.isChosen{
  background-color: red;
}

.isNotChosen{
  background-color: blue;
}

额外注意事项 #

• 确保已安装必要依赖：mobx、mobx-react-lite（用于函数组件）或mobx-react（用于类组件）。
• 如果是类组件，需要用@observer装饰器包裹组件类，而非函数式的observer高阶组件。

内容的提问来源于stack exchange，提问作者dfassf