Ich kann Daisyuis Thema nicht dazu bringen, sich in einer nächsten.js -App zu verbreiten ⇐ CSS

[Anonymous]

Ich versuche, ein Thema von "Daisyui" zu verwenden, bei dem es darum geht, eine CSS -Komponentenbibliothek auf der Basis von CSS https://daisyui.com/. Ich habe eine nächste. Anhand der Beispiele und der Lesen der Dokumentation der Website sieht es so aus, als ob das Thema von der höchsten Komponente an alle nach innen befindlichen Komponenten weitergegeben wird. src = "https://i.sstatic.net/itwkb.png"/>
Ich habe meine Tailwind.config.js Datei so aussehen:

Code: Select all

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

bedeutet, dass alle Themen enthalten sind.

Code: Select all

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

function MyApp({ Component, pageProps }: AppProps) {
return (



)
}

export default MyApp
< /code>
I also made a postcss.config.js file
module.exports = {
plugins: ['tailwindcss', 'autoprefixer'],
};
< /code>
And I imported
@tailwind base;
@tailwind components;
@tailwind utilities;
< /code>
at the top of globals.css.
This fails because the resulting webpage is just plain white.

[img]https://i.sstatic.net/vA6Y3.jpg[/img]

But what's weird is when I change daisyui: { themes: true }

in Tailwind.config.js to daisyui: {Themen: ["synthwave"]} . Die Webseite ist korrekt mit Daisyuis synthwave:

< /p>
Ich bin angenommen, dass dies nur funktioniert, weil dies nur so ist. Ich möchte in der Lage sein, verschiedene Themen auf einer Seite zu deklarieren, wenn ich möchte. Wie kann ich das Thema für die gesamte App korrekt so einstellen, dass ich es auf einzelnen Seiten überschreiben kann, wenn ich möchte?