React Calendar组件样式异常求助：工作日文字及控制按钮变白

我正尝试在网页中添加React Calendar组件，但当前月份周一至周五的日期文字、日历顶部切换年月的控制按钮都显示为白色，尝试多种方法都无法解决。

InterviewScheduling.js 文件代码 #

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './Interviewscheduling.css';

function InterviewScheduling() {
  const [date, setDate] = useState(new Date());

  const onChange = date => {
    setDate(date);
  };

  const tileClassName = ({ date }) => {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth();
    const currentYear = currentDate.getFullYear();
    const selectedMonth = date.getMonth();
    const selectedYear = date.getFullYear();

    if (selectedMonth === currentMonth && selectedYear === currentYear) {
      return 'custom-current-month';
    } else {
      return 'custom-other-month';
    }
  };

  return (
    <div className="InterviewScheduling">
      <header className="InterviewScheduling-header">
        <h1>Interview Scheduling</h1>
      </header>
      <div className="calendar-container">
        <Calendar
          onChange={onChange}
          value={date}
          tileClassName={tileClassName}
        />
      </div>
      <div className="appointment-form">
        <h2>Add Appointment</h2>
        <form>
          <label>Date:</label>
          <input type="text" value={date.toDateString()} disabled />
          <label>Time:</label>
          <input type="time" />
          <label>Appointment Description:</label>
          <textarea></textarea>
          <button type="submit">Add Appointment</button>
        </form>
      </div>
    </div>
  );
}

export default InterviewScheduling;

Interviewscheduling.css 文件代码 #

/* Calendar Styles */
.InterviewScheduling {
  text-align: center;
  font-family: Arial, sans-serif;
}

/* Current month dates */
.react-calendar__month-view__days__day--neighboringMonth {
  color: #ccc; /* Grey color for dates from other months */
}

/* Active date */
.react-calendar__tile--active {
  background-color: #007bff; /* Background color for active (selected) date */
  color: white; /* Text color for active (selected) date */
}

/* Appointment Form Styles */
.calendar-container {
  margin: 20px auto;
  max-width: 400px;
}

.appointment-form {
  max-width: 400px;
  margin: 20px auto;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

.appointment-form h2 {
  margin-bottom: 20px;
}

.appointment-form form {
  display: flex;
  flex-direction: column;
}

.appointment-form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.appointment-form input[type="text"],
.appointment-form input[type="time"],
.appointment-form textarea {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.appointment-form button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.appointment-form button:hover {
  background-color: #007bff;
}

日历当前显示效果 #

仪表盘相关文件 #

Dashboard.js 文件代码 #

import React, { useState } from 'react';
import Navbar from './Employeenavbar';
import Profile from './Employeeprofile';
import AssignedJobs from './Assignedjobs';
import InterviewScheduling from './Interviewscheduling';
import '../css/Employeedashboard.css'; // Import CSS file
import { Link } from 'react-router-dom';
import profileImage from '../images/user.png';

function Dashboard() {
    const [activeTab, setActiveTab] = useState('Profile');

    const handleTabChange = (tab) => {
        setActiveTab(tab);
    };

    return (
        <div className="employee-dashboard-container"> 
        <div className="navbar">
            <ul>
            <li className={activeTab === 'Assigned Jobs' ? 'active' : ''} onClick={() => handleTabChange('Assigned Jobs')}>Assigned Jobs</li>
            <li className={activeTab === 'Interview Scheduling' ? 'active' : ''} onClick={() => handleTabChange('Interview Scheduling')}>Interview Scheduling</li>
            <li className={activeTab === 'Profile' ? 'active' : ''} onClick={() => handleTabChange('Profile')}>
                <Link to="/profile">
                    <img src={profileImage}  alt="Profile" style={{ width: '50px', height: '50px', position: 'relative', top: '10px', left: '10px' }} />
                </Link>
            </li>
            </ul>
        </div>
        <div className="employee-content"> {/* Apply CSS class */}
            {/* Render content based on activeTab */}
            {activeTab === 'Profile' && <Profile />}
            {activeTab === 'Assigned Jobs' && <AssignedJobs />}
            {activeTab === 'Interview Scheduling' && <InterviewScheduling />}
        </div>
        </div>
    );
}
  
  export default Dashboard;

Employeedashboard.css 文件代码 #

.employee-dashboard-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .navbar ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
  }
  
  .navbar li {
    display: inline;
    margin-right: 20px;
    cursor: pointer;
  }
  
  .navbar li.active {
    font-weight: bold;
  }

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