如何避免CSS Module组件样式被全局Tailwind、next-auth样式覆盖

算力阿峰

2026-10-1

问题根因

你遇到的样式覆盖问题核心是 Tailwind的@tailwind base指令包含了全局原生元素重置样式，针对<button>标签的默认样式优先级高于你CSS Module中未指定元素选择器的类样式，接入next-auth的操作恰好触发了全局样式的加载顺序变化，最终导致按钮样式被覆盖。

解决方案

按以下步骤依次调整即可：

1. 修复App全局文件的错误写法

你当前把全局CSS文件赋值给变量当类名传入组件的写法完全错误，全局样式只需要直接导入即可，修改后的app.js代码如下：

import React from 'react';
import { SessionProvider } from "next-auth/react"
// 全局样式直接导入，不需要赋值给变量当类名使用
import '../styles/tstyles.css'

export default function App({Component,pageProps: { session, ...pageProps },}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
};

2. 提高导航栏按钮样式的优先级

任选以下一种方案实现即可：

方案A（侵入性最小，推荐）：在Navbar.module.css最顶部添加如下代码，清除Tailwind给按钮添加的默认样式，同时提高自定义样式的优先级：
```
button.r_link, button.menu__link, button.text_underlined {
  all: unset;
  display: var(--rLinkDisplay, inline-flex) !important;
  cursor: pointer;
}
```

方案B（适配全局需求）：如果不需要Tailwind的全局按钮重置规则，修改tstyles.css，调整base层的默认行为：

@import "tailwindcss/base" layer(tailwind-base);

@layer tailwind-base {
  button {
    all: revert;
  }
}

@tailwind components;
@tailwind utilities;