When using showMonthDropdown and showYearDropdown, the rendered native elements for the month and year do not respect the parent theme's text or background colors. This results in dark text on a dark background in dark mode, and sometimes unstyled elements in light mode, making them unreadable. To Reproduce Implement a DatePicker component with showMonthDropdown and showYearDropdown enabled. Apply a custom dark theme class (e.g., .react-datepicker-dark) to the calendar. Open the datepicker and observe the month and year dropdowns. The text and background are illegible. Expected behavior The elements for the month and year dropdowns should be stylable to match the custom theme (e.g., light text on a dark background for a dark theme). Screenshots (Here you can upload your "before" screenshot showing the problem) Proposed Solution The issue can be fixed by adding specific CSS rules to target the .react-datepicker__month-select and .react-datepicker__year-select classes. The following CSS resolves the issue for both light and dark themes:
/* Light Mode Styling for the dropdowns / .react-datepicker-light .react-datepicker__month-select, .react-datepicker-light .react-datepicker__year-select { background-color: #f9fafb; / Match light header background / color: #111827; / Dark text for readability */ border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 6px; }
/* Dark Mode Styling for the dropdowns / .react-datepicker-dark .react-datepicker__month-select, .react-datepicker-dark .react-datepicker__year-select { background-color: #374151; / Match dark header background / color: white; / Light text for readability */ border: 1px solid #4b5563; border-radius: 4px; padding: 2px 6px; }
Hacker0x01
