Next.js 14部署后AWS Amplify登录按钮不可见，本地正常

1. 调整全局CSS导入位置 #

Next.js 14 App Router中，全局CSS文件（如@aws-amplify/ui-react/styles.css）必须在根layout.tsx中导入，不能在客户端组件内导入。当前你在AuthenticationWrapper组件中导入CSS，部署时可能因加载顺序或Next.js的CSS优化导致样式丢失。

修改根layout.tsx：

// app/layout.tsx
import "@aws-amplify/ui-react/styles.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Your App",
  description: "Your app description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

然后删除AuthenticationWrapper中的import "@aws-amplify/ui-react/styles.css";。

2. 完善主题按钮样式配置 #

你的主题中仅定义了主按钮的背景色，但未设置文字颜色，可能导致按钮文字与背景色一致（比如深色背景+深色文字），看起来像是“不可见”。同时补充默认按钮的圆角配置，解决"or"后按钮无圆角问题：

const theme: Theme = {
  name: "Auth Example Theme",
  overrides: [defaultDarkModeOverride],
  tokens: {
    colors: {
      font: {
        interactive: {
          value: "#403B66",
        },
      },
    },
    components: {
      button: {
        primary: {
          backgroundColor: {
            value: "#403B66",
          },
          // 添加文字颜色，确保与背景对比明显
          color: {
            value: "#ffffff",
          },
          _hover: {
            backgroundColor: {
              value: "#312D4E",
            },
          },
        },
        _active: { backgroundColor: { value: "#312D4E" } },
        // 统一按钮圆角
        borderRadius: {
          value: "var(--amplify-radii-medium)",
        },
      },
      tabs: {
        item: {
          _focus: {
            color: {
              value: "#403B66",
            },
          },
          _hover: {
            color: {
              value: "#312D4E",
            },
          },
          _active: {
            color: {
              value: "#403B66",
            },
          },
        },
      },
    },
  },
};

3. 强制自定义CSS覆盖（兜底方案） #

如果上述方法无效，在全局CSS文件中添加强制样式覆盖，确保按钮可见：

/* app/globals.css */
.amplify-button--primary {
  background-color: #403B66 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.amplify-button {
  border-radius: 8px !important;
}

4. 检查版本兼容性 #

确保@aws-amplify/ui-react和aws-amplify版本一致，版本不匹配可能导致样式渲染异常。执行以下命令查看并更新：

# 查看当前版本
npm list @aws-amplify/ui-react aws-amplify

# 更新到最新兼容版本
npm install @aws-amplify/ui-react@latest aws-amplify@latest

5. 禁用Next.js CSS优化（临时排查） #

若怀疑Next.js的CSS压缩/树摇导致样式丢失，可在next.config.js中临时禁用相关优化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    cssModules: false,
  },
  optimizeCss: false,
}

module.exports = nextConfig

验证问题解决后，再逐步恢复优化配置，排查具体冲突点。

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