Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 971
Bahubali Ak Avatar asked Dec 01 '25 03:12

Bahubali Ak


1 Answers

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

like image 132
Fulashd Avatar answered Dec 02 '25 18:12

Fulashd



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!