'Change background color of Material Ui datepicker

I want to change the background color of my material ui datepicker modal

import { createMuiTheme } from "@material-ui/core";

const materialTheme = createMuiTheme({
    overrides: {
        MuiPickersToolbar: {
            toolbar: {
                backgroundColor: 'red',
            },
        },
        MuiPickersDay: {
            day: {
                color: 'black',

            },
            daySelected: {
                backgroundColor: '#33abb6',
            },
            dayDisabled: {
                color: '#ccc',
            },
            current: {
                color: 'red',
            },
        },
        MuiPickersModal: {
            dialogAction: {
                color: '#33abb6',
            },
        },
    },
});


export default materialTheme

In the above code i was able to change colors of date and few others but not the total background color

Are there any documentation from which i can get these class names or any other option

Solution 1:^[1]

Try in CSS:

.MuiPaper-root {
  background-color: #eaea87;
}

Solution 2:^[2]

In recent version of MUI (v5.3.1) I resolved this issue by adding sx={{ backgroundColor: 'white' }} to TextField in renderInput prop as below:

<MobileDatePicker
  label="Date"
  value={date}
  onChange={(newValue) => {
  setDate(newValue);
  }}
  renderInput={(params) => (
    <TextField
      sx={{ backgroundColor: 'white' }}
      fullWidth
      {...params}
    />
  )}
/>

Solution 3:^[3]

MuiPickers is using Dialog Material Ui, so override all dialog component that be used in this pickers. I'm not sure with this solution below. You can try this, hope it's worked.

   const materialTheme = createMuiTheme({
        overrides: {
            MuiPickersToolbar: {
                toolbar: {
                    backgroundColor: 'red',
                },
            },
            MuiPickersDay: {
                day: {
                    color: 'black',
    
                },
                daySelected: {
                    backgroundColor: '#33abb6',
                },
                dayDisabled: {
                    color: '#ccc',
                },
                current: {
                    color: 'red',
                },
            },
            MuiPickersModal: {
                dialogAction: {
                    color: '#33abb6', 
                    backgroundColor: 'YOUR HEX HERE',
                },
            },
        },
    });

I think the good way is send style in DialogProps

https://material-ui-pickers.dev/api/DateTimePicker (section modal wrapper)

so then you can override all dialog modal.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Elletlar
Solution 2	Mohammad Reza Ghasemi
Solution 3	darkscripter

'Change background color of Material Ui datepicker

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]