CODEWITHSUNDEEP
javascriptreactjsdatepickermaterial-ui
Nagaraj
Nagaraj

Reputation: 65

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

Upvotes: 6

Views: 15273

Answers (4)

fredrivett
fredrivett

Reputation: 6576

You can use createTheme to provide component overrides (see docs):

const theme = createTheme({
  components: {
    // Name of the component
    MuiInputBase: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          backgroundColor: "white",
          // add variant styles like so
          "&.Mui-disabled": {
            "backgroundColor": "#cccccc"
          }
        },
      },
    },
  },
});

You can see the name of the component to use by inspect element and looking at the class names, and you can find the slots in the component definition, e.g. this is the slots for the MuiInput component.

Also see this source on combining class names to target disabled, hover, active etc.

Upvotes: 1

Mohammad Reza Ghasemi
Mohammad Reza Ghasemi

Reputation: 363

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}
    />
  )}
/>

Upvotes: 1

darkscripter
darkscripter

Reputation: 425

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.

Upvotes: -2

Emir Mamashov
Emir Mamashov

Reputation: 1170

Try in CSS:

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

Upvotes: 2

Related Questions