Customizing the text color of the DateTimePicker

I'm attempting to modify the text color in a DateTimePicker component nested inside a table cell.

import DateTimePicker from 'react-datetime-picker';

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

Here is the result that I am getting. https://i.sstatic.net/3A2ih.png

Is there an alternative method to change the text color? The table theme is set to 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;

Answer №1

Modifying text color is easier compared to changing the color of an SVG image, as the latter is sourced from a different location. To alter the color of an SVG image, it must be saved within the project.

Instructions for changing text color

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

Tips for enhancing background color of SVG image

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

For a visual demonstration, refer to this StackBlitz example.

Answer №2

There doesn't appear to be a textColor attribute available. You might consider utilizing the calendarClassName option and experimenting with CSS properties like color: white, or possibly utilizing the style attribute for applying inline css. It's unclear whether the package internally supports this.

You can consult the npm documentation for react-datetime-picker to explore other attributes that could be useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If checkboxes are found within the table's rows and cells, add the parent row class if none of the

I am attempting to implement a small script within my table under the following conditions: The table contains a checkbox within each tr td, and I want my jQuery script to be applied only if the selector identifies a tr where all td checkboxes are unchecke ...

Tips for personalizing PNG images within an SVG element

Looking to update the color of a PNG image within an SVG tag. The PNG images I have are transparent, and I want to customize their colors based on user selections. How can this be achieved? Is there anyone out there who can assist me? <HoodieSvg ...

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

Utilizing the onclick colour changer feature to modify the text color of a paragraph, specifically targeting the parent paragraph

I am facing an issue with a 3 column document where the footer of each column has a color changer that is changing the text color of all paragraphs on the page instead of just the parent div. Here is the code snippet: $('a.text_blue').click(func ...

Utilizing Bootstrap for creating responsive CSS regulations

Is there a way for specific parts of my website to automatically resize on a mobile device without having to manually input responsive CSS rules based on page width? Can Bootstrap be used to trigger these changes instead? For instance, I noticed that Boot ...

implement css property solely when device is in landscape orientation

I am facing an issue with applying CSS to a mobile device, specifically for horizontal orientation. When the device is in a vertical position, the page appears blank, and different CSS loads for desktop view. Although I have managed to make the desktop CS ...

Unable to get vertical divider to function properly in Material UI

https://i.sstatic.net/4oQFz.png I am facing a challenge with a component that holds a card with several elements inside. My goal is to separate these elements with a vertical line, but unfortunately, the vertical line feature is not working as expected. c ...

jQuery - Modify Turn.js to exclusively implement the page Peel effect

I am attempting to implement the peel effect from turn.js into my code, where hovering over the bottom right corner of the page causes it to peel slightly and appear as if it is bending upwards. I specifically want only the peel effect and not the entire ...

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

I am facing a CSS issue that I am unable to resolve. I have 20 results that should be displayed on my website, but only 14 of them are appearing. The other ones are visible in the source code when inspected. When I move the position of the menu up or down, ...

Having difficulties with applying styles to links in SCSS

I've been attempting to customize the styling of <a href=""></a> elements on my webpage. Unfortunately, the code I've tried isn't producing the desired results. Here is the HTML: <div class="class-name"> The quick bro ...

Customize the initial view of the Material UI pagination component by specifying a new number value to

In the Material UI library, I am having trouble customizing the pagination component. Here is the code snippet for reference: <Pagination count={10} /> https://i.sstatic.net/pg261.png The default pagination displays from 1 to 5, but I want it to ...

Issue: ReactJS + MaterialUI + TypeScript - Property 'component' does not exist?Possible error in ReactJS: component property is

Currently, I am designing my own custom typography. However, I have encountered an error while implementing it. I have been referring to the following documentation: https://mui.com/material-ui/api/typography/ Here is the code snippet that I am using: h ...

Tips for inserting a line break in a script

Hello, I need some assistance with creating a typewriter effect using JS, CSS, and HTML. Everything seems to be working fine except when I try to add a new line of text, it doesn't display properly. var str = "<p>I want to put text here then ...

Can you identify the selected item on the menu?

My goal is to highlight the menu item for the current page by adding a "current" class. I've tried several code snippets from this website, but most of them didn't work as expected. The code I'm currently using almost works, but it has a sma ...

I am struggling to add a column in HTML for this specific layout. Can someone please provide me with guidance on how to proceed?

This is the code I have: <div class="container"> <div class="row"> <div class="col-md-4"> <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640"> </div ...

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

Leveraging React Dropzone in conjunction with React Final Form

Exploring the integration of these two components and facing some challenges. There is a discussion on Github that people reference for guidance, but I'm having trouble grasping it. Here's what I've gathered: <Field name={`logo`}> { ...

Guide on dynamically updating the valueOptions for a singleSelect column in Material-UI's DataGrid

Hello everyone, this is my second question on Stack Overflow so please bear with me if there are any mistakes in the way I ask or format my query. My goal is to achieve what the title suggests. Here is an example of an array that I use to set up my columns ...

I am having trouble getting the "npm run build" command to work properly on my React app project

After successfully initializing my react project, I encountered an issue when trying to build it. The error message I received is as follows: node:internal/fs/utils:344 throw err; ^ Error: UNKNOWN: unknown error, lstat 'C:\Users\dar ...

Is there a way for me to personalize the background of the mui-material datagrid header?

I am looking to update the background design of Mui Datagrid from this image to this image However, I am encountering an issue where the background color does not fully cover the header. I have attempted using "cellClassName:" in the columns but it has n ...