DaisyUI搭配Tailwind CSS：组件加载前无法设置HTML背景色#030518

问题原因 #

DaisyUI 会通过内置主题给 body 或全局容器设置默认背景色，其样式优先级高于你直接写在 body 上的 inline style，导致组件加载前的初始页面背景不符合预期。

解决方案 #

方案1：自定义DaisyUI主题（推荐）

在 tailwind.config.js 中覆盖DaisyUI的默认背景色主题变量，让全局样式统一使用你的目标颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '#030518', // 自定义背景色变量
      },
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        mytheme: {
          "base-100": "#030518", // 覆盖DaisyUI默认的基础背景色
        },
      },
    ],
  },
}

配置完成后，无需保留 body 上的 inline style，直接给根容器或 body 添加 bg-base-100 类即可，组件加载前后都会生效。

方案2：强制提高body样式优先级

如果不想修改主题配置，可通过 !important 强制覆盖DaisyUI的默认样式：
修改HTML中的body标签：

<body
  style="
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #030518 !important;
  "
>

或者在全局CSS文件中添加：

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #030518 !important;
}

方案3：设置根容器全屏背景

调整App.js中的根容器样式，让其占满整个屏幕并设置背景色：

<div className="bg-background min-h-screen w-full">
  <Footer />
  <Modal />
</div>

需配合方案1中 tailwind.config.js 里定义的 background 颜色变量使用，确保根容器覆盖整个页面区域。

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