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>
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;
CodePudding user response:
I don't see any textColor
attribute. You can use calendarClassName
and try resolving this using CSS color: white
or maybe try using style
attribute for adding inline css, not sure if the package is using that internally.
You can refer to npm doc of react-datetime-picker
for other attributes which might help.
CodePudding user response:
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.