DaisyUI模态框背景出现异常颜色问题求助

你遇到的异常背景色是DaisyUI modal组件默认的遮罩层（backdrop）样式，仅给dialog元素加bg-transparent只能覆盖自身背景，无法影响遮罩层。以下是两种可行的解决方法：

方法1：通过Tailwind/DaisyUI类直接覆盖 #

修改dialog的className，添加backdrop:bg-transparent清除遮罩层背景：

<dialog id="my_modal_1" className="modal bg-transparent backdrop:bg-transparent">

如果样式优先级不足，可添加!强制生效：

<dialog id="my_modal_1" className="modal bg-transparent backdrop:bg-transparent!">

方法2：自定义全局CSS #

在项目全局样式文件（如globals.css）中添加代码，精准覆盖目标模态框的遮罩层样式：

#my_modal_1::backdrop {
  background-color: transparent !important;
}

修改后的完整代码示例 #

<>
  <button className='btn bg-gray-900 text-white border-none normal-case font-medium hover:bg-gray-900' onClick={()=>window.my_modal_1.showModal()}>Create Project</button>
  <dialog id="my_modal_1" className="modal bg-transparent backdrop:bg-transparent">
    <form method="dialog" className="modal-box bg-gray-900">
      <h3 className="font-bold text-lg">Project Information</h3>
      <br /><br />
      <input type="text" placeholder="Project's Name" onChange={(e) => {setName(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
      <br /><br />
      <input type="text" placeholder="Project's URL" onChange={(e) => {setUrl(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
      <br /><br />
      <button className="btn bg-indigo-700 text-white border-none hover:bg-indigo-800 normal-case" onClick={createProject}>Create Project</button>
      <br /><br />
      {response}
      <p className='text-red-500 font-medium'>
        {error}
      </p>
      <div className="modal-action">
        <button className="btn bg-gray-950 border-none hover:bg-gray-950 normal-case -mt-7 text-white">Close</button>
      </div>
    </form>
  </dialog>
</>

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