无法移除Tailwind/DaisyUI输入框的深色模式问题求助

我用React、Tailwind CSS和DaisyUI开发了一个设置页面，其中的Input组件呈现深色，我希望它们和页面其他部分一样为白色，但添加bg-white类名的方法无效，不清楚为何会显示深色，求解答原因及解决办法。

Settings.jsx #

import React from 'react';
import 'tailwindcss/tailwind.css';
import 'daisyui/dist/full.css';
import FormInput from '../components/inputs/FormInput';
import DateInput from '../components/inputs/DateInput';

function Settings() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
      <div className="max-w-2xl mx-auto bg-white shadow-xl rounded-lg p-8" style={{ width: '800px' }}> {/* Nichtmehr responsive */}
        <h1 className="text-4xl font-bold mb-8 text-center">Einstellungen</h1>
        <div>
          <h2 className="text-2xl font-bold mb-4">Konfiguration</h2>
          <div className="grid grid-cols-1 gap-4">
            <FormInput
                label="Zigaretten am Tag"
                placeholder="15"
                type="number"
                name="cigsPerDay"
            />

            <FormInput
                label="Zigaretten pro Packung"
                placeholder="80"
                type="number"
                name="cigsPerPack"
            />

            <FormInput
                label="Preis pro Packung (€)"
                placeholder="7"
                type="number"
                name="pricePerPack"
            />

            <DateInput
                label="Zeitpunkt des Aufhörens"
                name="dateOfReturn"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Settings;

FormInput.jsx #

import React, { useState, useEffect } from 'react';

function FormInput({ label, placeholder, type, name }) {
  const [inputValue, setInputValue] = useState('');

  // 组件挂载时从localStorage加载值
  useEffect(() => {
    const storedValue = localStorage.getItem(name);
    if (storedValue !== null) {
      setInputValue(storedValue);
    }
  }, [name]);

  const handleFocus = (e) => {
    e.target.select();
  };

  const handleChange = (e) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    // 将值存储到localStorage
    localStorage.setItem(name, newValue);
  };

  return (
    <div className="form-control">
      <label className="label">
        <span className="label-text">{label}</span>
      </label>
      <input
        type={type}
        placeholder={placeholder}
        className="input input-bordered"
        value={inputValue}
        onFocus={handleFocus}
        onChange={handleChange}
      />
    </div>
  );
}

export default FormInput;

尝试的修复代码 #

<div className="form-control">
   <label className="label">
      <span className="label-text">{label}</span>
   </label>
   <input
        type={type}
        placeholder={placeholder}
        className="input input-bordered bg-white" {/* 添加bg-white尝试覆盖深色样式 */}
        value={inputValue}
        onFocus={handleFocus}
        onChange={handleChange}
   />
</div>

原因 #

1. CSS优先级冲突：你代码中先引入了Tailwind的CSS，再引入DaisyUI的CSS，导致DaisyUI的input组件样式优先级更高，直接覆盖了Tailwind的bg-white类。
2. 深色模式影响：DaisyUI默认可能启用了深色主题，或者你的Tailwind配置中开启了深色模式，使得Input组件继承了深色主题的背景样式。

解决办法 #

方法1：调整CSS引入顺序

将Tailwind CSS放在DaisyUI之后引入，让Tailwind的类优先级更高：

import 'daisyui/dist/full.css';
import 'tailwindcss/tailwind.css';

方法2：使用DaisyUI浅色主题类

给Input或其父容器添加light类，强制使用浅色主题样式：

// 给Input添加light类
<input
  type={type}
  placeholder={placeholder}
  className="input input-bordered light"
  value={inputValue}
  onFocus={handleFocus}
  onChange={handleChange}
/>

或者给父容器form-control添加：

<div className="form-control light">
  <!-- 标签和Input -->
</div>

方法3：强制提升Tailwind类优先级

使用Tailwind的!前缀强制提升bg-white的优先级：

<input
  type={type}
  placeholder={placeholder}
  className="input input-bordered !bg-white"
  value={inputValue}
  onFocus={handleFocus}
  onChange={handleChange}
/>

方法4：检查并调整深色模式配置

打开tailwind.config.js，查看深色模式设置：

module.exports = {
  darkMode: 'media', // 或 'class'
  // 其他配置
};

如果不需要自动切换深色模式，可设置darkMode: false禁用；如果是class模式，确保根元素没有添加dark类。

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