CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
Bahubali Ak
Bahubali Ak

Reputation: 246

How to change MUI DatePicker Calendar selected date background color using makeStyles

I want to change the background colour of selected date in MUI datePicker. As shown in below picture i need to change the blue color to some other color.
Below is my code

const useStyles = makeStyles(theme => ({
  datePickerStyle: {
    "& .css-bkrceb-MuiButtonBase-root-MuiPickersDay-root.Mui-selected": {
    backgroundColor: "red",
    color: '#000000'
  },
  }

        <DatePicker
          disablePast
          value={checkout.rideDate}
          shouldDisableDate={getDisabledDates}
          onChange={(newValue) => {
            dispatch(setRideDate(newValue?.toISOString().split('T')[0]))
          }}
          renderInput={(params) => <TextField className={classes.datePickerStyle} {...params} 
          />
          }

enter image description here

Upvotes: 2

Views: 8356

Answers (1)

Fulashd
Fulashd

Reputation: 101

I resolved it by passing style in PaperProps like this:

            PaperProps={{
              sx: {
                "& .MuiPickersDay-root": {
                  "&.Mui-selected": {
                    backgroundColor: colors.Cerulean,
                  },
                },

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

Upvotes: 8

Related Questions