DateTimePicker text color

Issue

I am trying to change the color of the text in DateTimePicker component within a table cell.

import DateTimePicker from 'react-datetime-picker';

<td>
      <DateTimePicker onChange={onChange} value={value} textColor="white"/>
</td>

I get the following output.

Is there any other way to change the color of the text? Also the theme of the table is dark.

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {  Table } from 'reactstrap'
import {useState} from 'react'
import DateTimePicker from 'react-datetime-picker';


function App() {


  const [value, onChange] = useState(new Date());

  return (
    <>
  <div>
    <Table dark>
    <thead>
      <tr>
        
        <th></th>
      </tr>
    </thead>
    <tbody>
    <td >
      <DateTimePicker onChange={onChange} value={value} textColor="white"/>
    </td>
    </tbody>
    </Table>
</div>
 </>
 );
}

export default App;

Solution

we can change the color of the text but we can't change color of SVG image because it is coming from some other place. if we want to change the color of SVG image, we need to store our SVG image in the project.

to change the color of the text

.react-datetime-picker__inputGroup__input {
  color: aliceblue !important;
}

changing the background color for svg image to get good look

.react-datetime-picker__button svg {
  background-color: aliceblue !important;
}

also providing stackblitz example here.

Answered By - Exception