我无法在next.js应用程序中传播戴斯育的主题
我正在尝试使用"Daisyui“中的主题，这是一个基于顺风的css组件库https://daisyui.com/。我有一个next.js应用程序，入口点是pages/_app.tsx。从例子和阅读网站的文档来看，主题似乎是从最高的组件传递到所有的内部组件。
将daisyui添加到tailwind.config.js文件中，如下所示：
我使我的tailwind.config.js文件看起来像这样：
/** @type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
plugins: [require("daisyui")],
daisyui: {
themes: true
}
}true意味着所有主题都包括在内。
我将主题"synthwave“添加到next.js应用程序的最高级别组件中，该组件是围绕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;在globals.css的顶端。
这是失败的，因为最终的网页是纯白色的。
但奇怪的是，当我将daisyui: { themes: true }中的tailwind.config.js改为daisyui: { themes: ["synthwave"] }时。该网页正确地以daisyui的同步波为主题：
我假设这只是因为它覆盖了每个页面上的所有样式，而我不想这样做。如果我想要的话，我想在任何页面上声明不同的主题。那么，我如何正确地设置整个应用程序的主题，如果我愿意的话，我可以在单独的页面上覆盖它？
回答 1
Stack Overflow用户
发布于 2022-10-10 20:33:15
这个链接是非常有用的https://nextjs.org/docs/advanced-features/custom-document。您可以创建一个名为_document.js的文件，该文件可以更新用于呈现页面的和标记。正如链接所述，我在pages中创建了一个名为pages的文件，如下所示：
pages/_document.js：
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html data-theme="synthwave">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}注意这段代码<Html data-theme="synthwave">。它正确地将index.tsx设置为daisyui的synthwave主题。
https://stackoverflow.com/questions/73994025
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号