如何用Tailwind CSS自定义React-datepicker暗黑模式下的日历元素？

首先你之前的全局CSS代码有个明显错误：选择器react-datepicker__time-list和react-datepicker__time-box漏了前缀.，变成了标签选择器而非类选择器，这是样式不生效的核心原因之一。

React-Datepicker本身提供了大量用于自定义内部元素的className属性，你可以直接通过这些属性结合Tailwind的暗黑模式类来实现样式切换，不需要依赖全局CSS（当然也可以结合使用）。以下是具体方案：

一、使用组件自带的自定义className属性 #

React-Datepicker为内部核心元素都提供了专属的className配置项，常用的包括：

• calendarClassName：日历主体容器
• headerClassName：日历顶部标题栏
• navigationClassName：左右导航按钮的容器
• timeListClassName：时间选项列表容器
• dayClassName：单个日期单元格

结合Tailwind的暗黑模式（假设你已配置好Tailwind的darkMode: 'class'），可以这样写：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// 组件内使用
<DatePicker
  // 开启时间选择（如果需要）
  showTimeSelect
  timeFormat="HH:mm"
  // 自定义各元素样式
  calendarClassName="bg-white dark:bg-gray-800 rounded-md shadow-md"
  headerClassName="bg-gray-100 dark:bg-gray-700 border-b dark:border-gray-600"
  navigationClassName="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
  timeListClassName="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>

二、修复全局CSS方案（如果仍需要） #

如果你偏好全局CSS，修正选择器错误后，结合Tailwind的@apply语法可以更简洁地写样式：

/* 全局CSS文件，比如src/globals.css */
.react-datepicker__time-list {
  @apply bg-white text-black dark:bg-gray-800 dark:text-white;
}

.react-datepicker__time-box {
  @apply bg-white dark:bg-gray-800;
}

/* 可扩展其他需要修改的元素 */
.react-datepicker__header {
  @apply bg-gray-100 dark:bg-gray-700;
}

注意：确保你的应用根元素（比如html或body）在暗黑模式下添加了dark类，Tailwind的暗黑样式才会生效。

三、快速调试技巧 #

如果不确定内部元素的类名，可以打开浏览器开发者工具，直接定位到日历的对应元素，查看React-Datepicker生成的类名，再针对性地编写样式或配置className属性。

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