如何修改MUI DateCalendar选中日期的圆圈大小与颜色

要修改选中日期的蓝色圆圈尺寸和颜色，你可以通过MUI官方提供的稳定类名定位选中状态的日期元素，在现有代码中添加以下样式规则：

方法1：在styled组件中扩展样式 #

修改你的CustomDateCalendar样式，新增选中日期的样式规则：

const CustomDateCalendar = styled(DateCalendar)`
  .MuiPickersCalendarHeader-root {
    display: none;
  }
  .MuiPickersDay-dayWithMargin {
    margin-top: -15px;
  }
  .MuiPickersDay-dayOutsideMonth {
    margin: 30px;
  }
  .MuiDayCalendar-header {
    margin-top: 20px;
  }
  /* 选中日期的圆圈样式 */
  .MuiPickersDay-root.Mui-selected {
    /* 调整圆圈大小：修改宽高，去掉默认padding避免影响尺寸 */
    width: 36px;
    height: 36px;
    padding: 0;
    /* 修改圆圈背景色 */
    background-color: #ff4081;
    /* 修改选中日期的文字颜色 */
    color: white;
  }
  /* 可选：修改选中日期hover时的颜色 */
  .MuiPickersDay-root.Mui-selected:hover {
    background-color: #ff79b0;
  }
`;

方法2：通过sx prop直接定义样式 #

如果你更倾向于在组件的sx属性中添加样式，可以这样写：

<CustomDateCalendar  
  defaultCalendarMonth={dayjs('2023-06-01')}
  disablePast={false}
  views={['day']}
  disableFuture={false}
  maxDate={dayjs('2023-06-30')}
  minDate={dayjs('2023-06-12')}
  sx={{
    marginTop:"85px",
    marginLeft:"1px",
    height:"180px",
    width: "326px",
    border: "1px solid #EFEFEF",
    backgroundColor:"white",
    /* 选中日期样式 */
    '& .MuiPickersDay-root.Mui-selected': {
      width: '36px',
      height: '36px',
      padding: 0,
      backgroundColor: '#ff4081',
      color: '#fff',
    },
    '& .MuiPickersDay-root.Mui-selected:hover': {
      backgroundColor: '#ff79b0',
    },
  }}  
/>

关键说明 #

• 使用.MuiPickersDay-root.Mui-selected定位选中状态的日期元素，这是MUI提供的稳定类名，避免使用动态生成的css-xxx类名（这类类名会随版本或构建变化）。
• 调整width和height的值可以改变圆圈大小，数值越大圆圈越大。
• padding: 0是为了抵消Day组件默认的内边距，确保圆圈尺寸符合预期。
• 修改backgroundColor可替换默认的蓝色圆圈颜色，color用于调整日期文字的颜色。

内容的提问来源于stack exchange，提问作者AfterFray