Css 我无法在 next.js 应用程序中传播 daisyui 的主题

我正在try 使用"Daisyui"中的一个主题，它是一个基于tailwind 的CSS组件库https://daisyui.com/.我有一个next.js应用程序，入口点是pages/_app.tsx.从查看示例和阅读网站的文档来看，主题似乎是从最高组件传递到所有内部组件.

You add daisyui to the tailwind.config.js file, Like this:

我让我的tailwind.config.js%文件看起来是这样的:

/** @type {import('tailwindcss').Config} */
module.exports = {
    //...
    content: ['./pages/**/*.{js,ts,jsx,tsx}'],
    plugins: [require("daisyui")],
    daisyui: {
      themes: true
    }
  }

true表示包含所有主题.

我在next.js应用程序的最高级别组件中添加了主题"SynthWave"，该组件是一个包装大约Component个的div标签:

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div theme-data="synthwave">
  <Component {...pageProps} />
  </div>
  )
}

export default MyApp

我还制作了一个postcss.config.js文件

module.exports = {
    plugins: ['tailwindcss', 'autoprefixer'],
  };

然后我进口了

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

在global als.css的顶部.

This fails because the resulting webpage is just plain white.

But what's weird is when I change daisyui: { themes: true } in tailwind.config.js to daisyui: { themes: ["synthwave"] }. The webpage IS correctly themed with daisyui's synthwave:

我认为这只会起作用，因为它覆盖了每个页面上的所有样式，而我不希望这样.我希望能够声明任何页面上的不同主题，如果我想的话.那么，我如何正确地设置整个应用程序的主题，以便我可以根据需要在单独的页面上覆盖它？