Having trouble with the sx selector not functioning properly with the Material UI DateTimePicker component

I'm currently working with a DateTimePicker component and I want to customize the color of all the days in the calendar to match the theme color:

              <DateTimePicker
                sx={{ "input": { color: "primary.main" }, "button *": { color: "primary.main" } }}
                slotProps={{ textField: { error: false } }}
                value={props.values.incidentTime}
                onChange={(e) => props.setFieldValue('incidentTime', dayjs(new Date(e.$y, e.$M, e.$D)))}
                label="Date of Birth"
              />

This code successfully changes the color of the textfield text and the calendar icon. However, upon inspecting the elements, I noticed that the calendar days are styled as button components, and they are displaying in white instead of the defined theme color.

https://i.sstatic.net/sKVsY.png

htmlcssreactjstypescriptmaterial-ui

Answer №1

The reason behind this issue is your utilization of the sx prop; however, you should be using slotProps instead. Consider implementing it like so:

<ThemeProvider theme={theme}>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DateTimePicker
      label="Basic date time picker"
      slotProps={{
        textField: {
          color: "secondary"
        }
      }}
    />
  </LocalizationProvider>
</ThemeProvider>

To see a functional example, check out this link: https://codesandbox.io/s/boring-monad-9vcqlm?file=/Demo.tsx

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

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

I'm facing an issue while trying to implement the following documentation: https://swr.vercel.app/ using my own setup: import React, { useEffect } from 'react' import PatientsTable from 'components/patients/PatientsTable' import ...

reactjstypescriptnext.js

What is the best way to replicate certain key-value pairs in an array of objects?

I am working with an array of objects. resources=[{name:'x', title:'xx',..},{name:'y',title:'yy',..}..] To populate my HTML tooltip, I am pushing all the titles from the resources array to a new array. dialogOkCli ...

arraysangulartypescript

Refine current attributes of an object in Typescript

In typescript, I have an object of type any that needs to be reshaped to align with a specific interface. I am looking for a solution to create a new object that removes any properties not defined in the interface and adds any missing properties. An exam ...

javascripttypescriptinterfacegraphql

Adjusting column styles on mobile or desktop devices

My row has two columns <div class="row"> <div class="col-9"> hello </div> <div class="col-3"> world </div> </div> But I want to change the column classes for small screens, so they would be ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to specify the encoding for a text iframe embedded in a webpage

Can anyone help me with document embedding in HTML? In my current project, I am directly embedding my update logs as text files into the webpage, along with a selection menu to view all the updates. However, I ran into a minor issue where the Firefox cons ...

javascripthtmliframe

What is the best way to ensure that your node packages are always current and up

I recently set up an app using a truffle react box, but when I run npm install, I receive numerous deprecation warnings and notifications that some packages have missing dependencies. Is there a reliable method or online resource where I can update my pack ...

node.jsreactjsnpm

My CSS nesting seems to be posing a problem - any idea what

Something unexpected happened while I was working on a project with others. Last night, some files were edited and when I updated my subversion today, the nested divs seemed to have lost their hierarchy. I have been trying all day to fix this issue but wit ...

csshtmlnested

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Extracting the input data from a JSON source

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Testing AJAX Requests ...

htmljqueryjsonajax

What is the best way to hide or eliminate spinners/arrows in react-select?

I am currently utilizing react-select for my project, but I'm encountering an issue with removing the spinners/arrows from the dropdown menu. So far, I have successfully removed the default separator "|" and Dropdown Indicator using the following cod ...

javascriptreactjsreact-selectreact-select-search

What is the best method for linking an HTML file to CSS, javascript, and image files?

I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...

javascripthtmlioszipnsurl

Alignment vertically in a Razor view

Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...

htmlcssrazor

The Street View feature on Google Maps API is now showcasing a cool,

I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Conditional validation in Typescript based on the nullability of a field

I have come across the following code snippet: type DomainFieldDefinition<T> = { required?: boolean } type DomainDefinition<F, M> = { fields?: { [K in keyof F]: DomainFieldDefinition<F[K]> }, methods?: { [K in keyof M]: M[K] & ...

typescript

Complete the form by entering data into multiple fields sharing the same identifier

Is there a way to send multiple dropdown values with the same name and have them inserted into the database? Any assistance would be greatly appreciated. <?php session_start(); require_once('Connections/koneksi.php'); if($_REQUEST['sub ...

phphtmlforms

Steps for transferring .pem files to Typescript outDir

I am currently working on a NodeJS project using Typescript, and I have encountered an issue with referencing .pem files to initiate an https server. The problem arises when my code is compiled, as the .pem files are not present in the output directory. ...

node.jstypescript

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/ ...

csshtml

Having trouble getting this JavaScript query to function properly

The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The ...

javascriptjqueryhtmlcss

Is there a way to handle button click event when utilizing this.props.children in React?

I have recently completed a React component that serves as a modal wrapper. The content for this modal is passed through the props.children property. Inside the content, there is a button that, when clicked, should trigger an event in the parent component. ...

javascriptreactjschildrenpreact

Is the TypeScript compiler neglecting the tsconfig.json file?

I am new to TypeScript and currently exploring how to set it up in WebStorm. One of the first steps I took was creating a tsconfig.json file in the main directory of my project and updating the built-in TypeScript compiler to version 1.6.2. However, despit ...

typescriptreferencetsconfig