如何使用 makeStyles 更改 MUI DatePicker 日历选择的日期背景颜色答案

【问题标题】：How to change MUI DatePicker Calendar selected date background color using makeStyles如何使用 makeStyles 更改 MUI DatePicker 日历选择的日期背景颜色
【发布时间】：2022-06-14 18:08:48
【问题描述】：

我想更改 MUI datePicker 中所选日期的背景颜色。如下图所示，我需要将蓝色更改为其他颜色。
下面是我的代码

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

【问题讨论】：

您使用的是 mui v4 还是 v5？
我正在使用这些版本包 "@material-ui/core": "^4.12.3" , "@mui/styles": "^5.3.0",

标签： html css reactjs material-ui

【解决方案1】：

我也在寻找同样的问题:)

我通过像这样在 PaperProps 中传递样式来解决它

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

https://i.stack.imgur.com/D8DWw.png

【讨论】：