Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is black.

I have attempted the following solutions without success:

const muiTheme = getMuiTheme({
  datePicker: {
    selectColor: '#fd5f00',
    headerColor: '#f0f0f0',
    color: '#fd5f00',
    textColor: '#303030',
    calendarTextColor: '#fd5f00'
  },
  flatButton: {
    color: '#fd5f00',
    primaryColor: '#fd5f00',
    secondaryColor: '#fd5f00',
    disabledColor: '#fd5f00',
  },
});

I am hopeful that there is a solution for this issue. Thank you for your assistance.

javascriptcssreactjsmaterial-ui

Answer №1

To define the primary text color, simply specify palette.textColor.

const customTheme = createCustomTheme({
  palette: {
    textColor: '#fd5f00',
  }
});

Upon reviewing the code in DayButton.js, it appears that disabled dates are automatically given a slight opacity adjustment, meaning that palette.textColor effectively determines the color of active days.

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

Troubleshooting the "missing checks.state argument" error in AUTH0 debugging

I recently launched my new NextJs blog application at on Vercel, but I'm encountering some issues with getting auth0 to function properly. Upon clicking the login button located in the top right corner of the screen, users are redirected to auth0 to ...

javascriptoauth-2.0next.jsauth0

What is the process of converting a value from an HTML form into a PHP variable?

I am looking to update the order preparation time. I have created an HTML form, but I am facing issues passing it into a PHP variable after this code block. I have tried using Cookies and POST method, but neither has helped me so far. <form> ...

javascriptphpcookies

Parameters in Typescript decorators

Can someone help me understand the various parameters of a Typescript decorator? function myDecorator(target) { // do something with 'target' ... } In the given example, I am aware that 'target' represents the function/class to wh ...

javascripttypescript

Revising Your Task Checklist with React

I encountered an issue while attempting to update the value retrieved from Addlist. Unfortunately, my solution isn't working as expected. Additionally, clicking on the '+' button without entering any text results in an empty list being creat ...

javascriptreactjs

Scroll down only if the user is not actively scrolling

Struggling with JavaScript once again and feeling frustrated! Can someone please assist me? I am currently working on a basic chat application that retrieves content from a text file using an AJAX request. The content refreshes every few seconds, scrollin ...

javascriptjqueryajax

When using create-react-app, encountering the error message "npm is not recognized" is a common issue

I have been using react for almost a year now. After reinstalling my operating system, I encountered an issue where commands like 'npx create-react-app my-app' resulted in the error message: '"node"' is not recognized as an in ...

node.jsreactjsnvm

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

Tips for positioning a label within the span element wpcf7-form-control-wrap

Is it possible to place the label for input elements inside the span element generated by the cf7 shortcode? I want to achieve this in order to make the label only visible when the input field is in focus. To accomplish this, both the label and the input ...

jqueryhtmlcsswordpresscontact-form-7

Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like: <div class="pt-4"> <h5>Genres:</h5> <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> <span v-if="index < ...

cssvue.js

Tips for managing onClick events within a conditional component

I am currently attempting to implement an onClick event on the data that I have selected from the AsyncTypeahead. My goal is to pass a callback function to the Problem component, which will only render if an item has been selected. However, after selecting ...

javascriptreactjsnext.jsbootstrap-typeahead

Mastering the Art of Displaying Links in Columns within a Table Using ReactJS

I have the following code that fetches data from the backend and displays it in a table. Everything is working correctly. Now, I need to make the first column in the table appear as a link. How can I achieve that? const EditController = () => { c ...

javascriptreactjsnode.jsexpress

Button that floats and leads to the previously visited page

Looking to incorporate a button that moves with the user's scroll or remains fixed at the bottom of the window. I have detailed instructions on certain pages (e.g. /georgia-insurance-license) that contain links to other related posts (e.g. How to Pas ...

cssbuttonnavigationstickysquarespace

Continuous scroll notification within the fixed menu until reaching the bottom

I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...

javascriptjqueryhtmlcss

Implementing session timeout functionality in a ReactJS component

I need assistance with implementing session timeout on my login page. The goal is to display a session timeout alert a few seconds before the session expires, and then redirect the user back to the initial page once the session times out. Below is an excer ...

reactjsredux-formredux-thunk

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempte ...

javascriptjqueryhtmlcssprinting

Implementing CSS keyframes when a specified PHP condition is satisfied

I am looking to implement an opening animation on my website that should only play when a user visits the site for the first time. I want to avoid displaying the animation every time the page is reloaded, so it should only run if a cookie indicating the us ...

javascriptphpjqueryhtmlcss

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

javascripthtmlnode.jsexpresshandlebars.js

This function is functional with jquery version 1.4.2 but encounters issues with jquery version 1.9.1

I have encountered an issue with a script that submits data to my database. The script worked perfectly on version 1.4.2, but the template I am using now requires version 1.9.1, so I updated my site accordingly. However, after the update, I am facing an er ...

phpjavascriptjqueryajax

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Sorry for the oversized images! I'm diving into media queries for the first time. When I adjust my browser window to 320px, here's how my site displays: This is what I want it to look like on mobile phones. However, when I view it on my iPhone, ...

iphonecssmobilemedia-queries

Using jQuery, identify when any of the elements within every function are missing

In my JavaScript file, I have the following code snippet: var aryYears= []; $(".year").each(function(){ aryYears.push($(this).val()); }) This allows me to pass an array of years as a parameter in the saveChanges function. I want to make ...

javascriptjqueryfunctionalerteach