Only the part of the text will lose color.

[Okakajp25]

Only the text part loses the background color like the image, is there a way to correct it?

page.js

"use client"
import Image from "next/image";
import { NavBar } from "../component/navbar";

export default function daisyui() {
    return (
        <>
        <NavBar/>
        <main className="p-20">
            <p>Hello world</p>
        </main>
        </>
    )
}

navBar.js

import Image from "next/image";
import '../globals.css';


export function  NavBar() {
    return (
        <div className="navbar bg-base-200 border-b top-0 left-0 w-full fixed border-b">
            <div className="flex-1">
                <a className="btn btn-ghost text-xl">
                    <Image 
                        src="https://data.okakey.com/sky-data/icon.ico"
                        width={40}
                        height={40}
                        alt="Sky icon"
                        priority
                    />Sky wiki
                </a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal px-1">
                    <li>
                        <a>
                            Link
                        </a>
                    </li>
                    <li>
                        <details>
                            <summary>
                                Ability List
                            </summary>
                            <ul className="p-2 bg-base-100 rounded-t-none">
                                <summary>
                                    <p className="text-mainskill">������</p>
                                </summary>
                                <ul className="p-2 bg-base-100 rounded-t-none">
                                    <a
                                        href="/"
                                        rel="noopener noreferrer"
                                        target="_blank"
                                        className="group rounded-lg"
                                    >
                                        <p>�士</p>
                                    </a>
                                </ul>
                                <summary>
                                    <p className="text-subskill">�����</p>
                                </summary>
                                <ul className="p-2 bg-base-100 rounded-t-none">
                                    <a
                                        href="/"
                                        rel="noopener noreferrer"
                                        target="_blank"
                                        className="group rounded-lg"
                                    >
                                        <p>天使�羽</p>
                                    </a>
                                </ul>
                                <summary>
                                    <p className="text-passiveskill">�������</p>
                                </summary>
                                <ul className="p-2 bg-base-100 rounded-t-none">
                                    <a
                                        href="/"
                                        rel="noopener noreferrer"
                                        target="_blank"
                                        className="group rounded-lg"
                                    >
                                        <p>��家</p>
                                    </a>
                                </ul>
                                <li>
                                    <a
                                        href="/"
                                        rel="noopener noreferrer"
                                        target="_blank"
                                        className="group rounded-lg"
                                    >Link 1</a>
                                </li>
                                <li>
                                    <a>Link2</a>
                                </li>
                            </ul>
                        </details>
                    </li>
                </ul>
            </div>
        </div>
    )
}

[saadeghi]

Please provide a minimum reproduction link.

[Okakajp25]

sorry I only understand a little English.
For example, I would be happy if you could tell me what kind of things I should add.
(This sentence uses machine translation)