Next.js 14组件样式问题及2024大型项目最优样式方案咨询

问题背景 #

当前使用Next.js v14搭配React v18，尝试使用Next.js的CSS Modules（SCSS兼容但官方文档未提及）时遇到样式不生效的问题：

问题代码示例 #

SCSS文件（toast.module.scss）：

.toastSuccess {
  color: green;
  .undo {
    color: blue;
  }
}

.toastError {
  color: red;
  .undo {
    color: blue;
  }
}

TSX文件中导入应用：

import styles from "./toast.module.scss";

return (
 <div className={isSuccess ? styles.toastSuccess : styles.toastError}>
   <div className="undo">undo</div>
   {/* 其他内容 */}
 </div>
)

上述代码中，.undo的样式未生效。

需求咨询 #

现咨询2024年大型React+Next.js项目中存储与应用样式的最优方案。目前了解到的方案有：

• 原子化样式组合（如Bootstrap或Tailwind的className="d-flex flex-row m-4"形式）
• 在样式文件夹中维护大量独立样式并引用
• 使用Styled Components
• 采用某种模块样式方案

个人倾向于模块样式方案，原因是：样式定义来自Figma，希望与.tsx文件分离但就近存放，同时保证样式名唯一性，修改影响可控，但现有Next.js模块样式方案表现不佳。想了解是否有其他更好的方案或改进方法？

解决方案与最优方案建议 #

先解决当前CSS Modules的问题 #

问题出在CSS Modules的作用域机制上：.undo作为全局类名，不会被CSS Modules处理，无法继承父组件的模块化样式。有两种修复方式：

1. 嵌套时使用:global()包裹全局类
   修改SCSS文件，让.undo在模块化作用域内生效：

.toastSuccess {
  color: green;
  :global(.undo) {
    color: blue;
  }
}

.toastError {
  color: red;
  :global(.undo) {
    color: blue;
  }
}

2. 将.undo也改为模块化类
   把.undo纳入模块化体系，TSX中同步引用对应样式：

.toastSuccess {
  color: green;
  .undo {
    color: blue;
  }
}

.toastError {
  color: red;
  .undo {
    color: blue;
  }
}

TSX修改为：

import styles from "./toast.module.scss";

return (
 <div className={isSuccess ? styles.toastSuccess : styles.toastError}>
   <div className={styles.undo}>undo</div>
   {/* 其他内容 */}
 </div>
)

这种方式更贴合CSS Modules的设计理念，能完全保证样式隔离。

2024年大型项目的模块样式最优方案 #

针对你「样式与TSX就近存放、隔离性强、匹配Figma设计」的需求，推荐以下改进方案：

1. 增强版CSS Modules（首推）

Next.js的CSS Modules本身支持SCSS嵌套，只需修正作用域使用规则即可。优化实践：

• 组件样式文件与组件TSX同目录，命名为[ComponentName].module.scss，保证就近维护
• 所有类名均使用模块化方式，避免全局类污染
• 利用SCSS的变量、混合宏（mixin）提取Figma设计规范（如颜色、间距），统一维护在项目根目录styles/下，通过@use导入复用
• 全局通用样式（如重置样式、全局布局）放在app/globals.scss中，Next.js会自动全局注入

2. CSS-in-JS方案：Emotion（替代Styled Components）

若需要更灵活的JS能力，Emotion比Styled Components更适配Next.js 13+的App Router：

• 支持服务器组件（Server Components）
• 样式可写在TSX文件中，也可单独抽离为样式文件
• 天然支持样式隔离，类名自动唯一
• 可直接使用JS变量传递样式，方便对接Figma设计变量

示例：

import { css } from '@emotion/react';

const toastSuccess = css`
  color: green;
  .undo {
    color: blue;
  }
`;

const toastError = css`
  color: red;
  .undo {
    color: blue;
  }
`;

export default function Toast({ isSuccess }) {
  return (
    <div css={isSuccess ? toastSuccess : toastError}>
      <div className="undo">undo</div>
    </div>
  );
}

3. 原子化样式+CSS Modules混合方案

若想兼顾Tailwind的高效原子化能力与Figma自定义样式，可混合使用：

• 通用布局、间距用Tailwind原子类
• 组件专属自定义样式用CSS Modules，就近存放
• 通过Tailwind的@layer指令将CSS Modules样式纳入Tailwind体系，保证样式优先级一致

总结 #

最匹配你需求的是增强版CSS Modules，完全满足样式就近存放、隔离性强、对接Figma设计的要求，修正作用域使用方式即可解决当前问题。若需要更灵活的JS能力，Emotion是更优选择。

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