css - Unable to style the numbers of datepicker

Question

I would like to change the colors of numbers in my datepicker. I am using react.js for that.

Here is my code :

import React, {useState} from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import {gql, useQuery} from "@apollo/client";
import './Datepicker.css'


const Datepicker = (props) => {
  const [startDate, setStartDate] = useState(new Date());
  let typeDance = props.typeDance
  let genre = props.genre
  let price = props.price
  let city = props.city
  const GET_ACTIVITY = gql`
    query Party($genre: String!, $price: String!, $typeDance: String!, $city: String!){
        party(genreSearch: $genre, priceSearch: $price, typeSearch: $typeDance, citySearch: $city){
            date
        }
    }
    `;
    const {loading, error, data} = useQuery(GET_ACTIVITY, {
        variables: {
            genre, price, typeDance, city
        }
    })
    console.log(data);
    //console.log(error);
    if (loading) return (<p>Loading...</p>);
    if (error) return (<p>Error : {error.message}</p>);


  const onChange = (startDate) => {
    setStartDate(startDate);
    props.handleDate(startDate);
  };
  //let endDate = new Date();
  //endDate.setDate(18);
  //let numberOfDaysToAdd = 13;

  //const daysHighlighted = new Array(numberOfDaysToAdd).fill(endDate);

  return (
    <DatePicker
      className="custom-select"
      dateFormat="dd/MM/yyyy"
      selected={startDate}
      color="blue"
      highlightDates={[ ...new Set(data.party.map(todo => new Date(todo.date)))]}
      onChange={onChange}
    />
  );
};

export default Datepicker;

I just want to change the color of the number from white black to purple.

Could you help me please ?

Thank you very much.

Here is my code : https://codesandbox.io/s/react-datepicker-forked-h6wre?file=/src/index.js

question from:https://stackoverflow.com/questions/65894215/unable-to-style-the-numbers-of-datepicker

Answer 1

Waitting for answers