Next.js中DaisyUI主题全局传播失效，如何实现页面级主题覆盖？

1. 修正Tailwind配置（引入所有主题） #

确保tailwind.config.js正确配置，保留themes: true以引入所有内置主题，可选指定默认主题让配置更清晰：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: true, // 引入所有内置主题
    darkTheme: "synthwave", // 可选：指定默认深色主题
  },
}

2. 全局设置默认主题（修正属性错误） #

你之前在pages/_app.tsx中使用的theme-data是错误属性，DaisyUI识别的主题属性为data-theme，修改后即可正常全局应用主题：

import type { AppProps } from 'next/app'
import '../styles/globals.css'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div data-theme="synthwave"> {/* 替换theme-data为data-theme */}
      <Component {...pageProps} />
    </div>
  )
}

之前的错误属性会导致样式解析异常，进而出现页面空白的问题。

3. 单页覆盖主题 #

要在单个页面上覆盖全局主题，只需在该页面的根元素上重新设置data-theme属性即可，页面级属性优先级高于全局配置：
比如在pages/about.tsx中：

export default function About() {
  return (
    <div data-theme="retro"> {/* 覆盖全局主题为retro */}
      <h1 className="text-2xl font-bold">About Page</h1>
      <p>This page uses the retro theme instead of synthwave.</p>
    </div>
  )
}

验证要点 #

• 确认globals.css中已正确引入基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 重启Next.js开发服务器，Tailwind配置变更需重启才能生效。

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