Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker

   <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                        className={styles.picker}
                         slotProps={{
                            day: {
                                sx: {
                                    backgroundColor: "red",
                                },
                            },
                        }}
                    />
                </LocalizationProvider>

By adding:

                                sx: {
                                    "&.Mui-selected": {
                                        backgroundColor: "red",
                                    },

I was able to achieve the desired effect, however it only updates upon clicking elsewhere...

Struggling to use sx{} specifically on that particular element. My current implementation changes the color of all days rather than just the selected one.

Answer №1

To modify the background color of the chosen day, make sure to include the root picker class in your styling. Give this a shot class:

slotProps={{                  
   day: {
        sx: {
            '&.MuiPickersDay-root.Mui-selected': {
                 bgcolor: 'red',
             },
            },
           },
         }}

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

Creating a dynamic header using react-virtuoso and material ui

I recently upgraded my table to a virtuoso table in order to improve loading time. However, I am facing issues with formatting the table properly. Previously, when it was just a material ui table, everything aligned perfectly. Despite reading through the d ...

Ways to access component load status in Next.js

I'm currently developing a basic Pokedex to showcase all Pokemon. I am utilizing a map function on an array of Pokemon objects to display all the cards in this manner: {pokemons.results.map((el, i) => { return ( <di ...

Encountering an issue when attempting to add an item to the Redux store using Redux Form

As a React beginner, I am in the process of developing a CRUD application using various technologies like Redux-Form, React Routing, Semantic UI, and Redux Store. So far, I have successfully implemented react routing, but I am facing challenges when it co ...

Exploring the width of Bootstrap 5 Tab Pane content

My issue lies with the content width of my tab panels - specifically, it doesn't work well with columns. I am unable to divide a tab-pane as col-md-7 and col-md-5 (refer to the screenshot below). I am unsure of how to resolve this issue. <div clas ...

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

Partial height side navigation bar

Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/ This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height. Any suggestions or solutions? Here's the ...

Issue with fixed header in Vuetify v-data-table not functional

While working with the Vuetify v-data-table component, I have enabled the fixed-header property. However, I have noticed that the table header is scrolling along with the table body. I am using the latest version of Chrome. Does anyone know how to addres ...

Switching up the Button onClick variant in Material-UI (MUI)

I'm looking to dynamically change the variant of a Button component from 'outlined' to 'contained' whenever it is clicked: <Button variant='outlined'>Click me to change my variant to contained</Button> Is thi ...

Encountered an issue while installing @reach/router on React version 17

Recently I started working on a project using React and decided to incorporate @reach/router. However, during the installation process in the command line, an error popped up: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ...

Managing both layouts within a single dynamic route

There are approximately 8 categories of detail and editorial pages, each with their own unique data. Unfortunately, nesting one route in a subfolder is not an option. pages/[detailPageCategory]/[slug].js pages/[editorialPageCategory]/[slug].js It would be ...

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...

React Script Proxy malfunctioning

After setting up my package.json according to the instructions in this helpful tutorial: "proxy": "http://localhost:3001", I am still facing an issue. The requests made to /api/* are not being redirected to http://localhost:3001. If anyone has expertise ...

Deleting information from several stores in React Reflux using a single action function

In the AuthActions file, there is a straightforward function called _clear that assigns this.data to undefined. This function is only invoked when a user logs out. However, upon logging back in with a different user, remnants of data from the previous ac ...

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

Differentiating onClick events for parent and child elements

I need help with my JSX code: <div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}> <div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} /> </div> When I click on the pare ...

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

Implementing ExpressJS with MongoDB on a MERN Development Stack

After configuring my ExpressJS & MongoDB client and running Nodemon, I consistently encounter the following warning: "DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the ...

What is the reason for padding influencing the overall dimensions?

The result I achieved was unexpected. After realizing that the text was positioned above the green markers, I decided to add some internal padding to the three pink containers. To my surprise and disappointment, when I made this adjustment, it ended up lo ...

Create a full-screen layout with a Bootstrap 5 column grid and a sleek navbar

Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar. Issue 1: I always see a vertical scroll bar on desktop. Issue 2: The Navbar doesn' ...