JAMstack 项目中 CSS 作用域冲突怎么解决？

康康 Dev 提问于 2026-03-16 22:43:22 阅读 17

框架

我最近用 Next.js 搭了个 JAMstack 站点，本地开发时样式都正常，但部署到 Vercel 后发现全局 CSS 和组件局部样式互相覆盖了。比如我在一个页面里写了下面这段 CSS，结果影响到了其他页面的按钮：

.btn {
  background: #0070f3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

我已经尝试过加 module.css，但有些第三方 UI 库还是用的普通 class，根本没法隔离。有没有在 JAMstack 架构下推荐的 CSS 作用域管理方案？

我来解答赞 6 收藏

反馈

1 条解答

Dev · 慧娟 Lv1

这问题太常见了，本质上就是全局 CSS 没有做隔离。JAMstack 站点部署后所有页面共享同一份静态资源，你写的全局 .btn 自然会影响到其他页面。

CSS Modules 是 Next.js 官方推荐的做法，你可以把原来的 .btn 改成 .btn.module.css，然后在组件里这样用：

/* Button.module.css */

.btn {

  background: #0070f3;

  color: white;

  border: none;

  padding: 8px 16px;

  border-radius: 4px;

}

import styles from './Button.module.css'



export default function Button() {

  return <button className={styles.btn}>Click me</button>

}

Next.js 会自动生成唯一的类名比如 Button_btn__3k8s5，起到隔离作用。

至于第三方 UI 库的问题，你可以用 CSS Modules 写一个覆盖样式：

/* overrides.module.css */

:global(.ant-btn) {

  /* 你的覆盖样式 */

  background: #0070f3 !important;

}

然后在组件里导入这个 CSS 文件，这样就能精准覆盖特定第三方组件的样式，同时不会污染全局。

如果第三方库样式冲突太严重，可以考虑用 CSS-in-JS 方案比如 styled-components 或者 emotion，它们运行时生成的样式也是隔离的。不过这会稍微增加一点 bundle 体积。

官方文档里说得很清楚：CSS Modules 是目前最轻量级的解法，不需要引入额外的运行时。

2026-03-16 23:11