如何自定义Mantine DatePicker中选中日期的样式？

要自定义选中日期的样式，你需要利用getDayProps回调提供的day参数，通过其中的isSelected属性判断当前日期是否被选中，再针对性设置样式。

你当前的代码给所有日期都应用了统一的背景色，只需稍作修改，区分选中与未选中状态即可实现需求：

<DatePicker
  value={value}
  onChange={setValue}   
  getDayProps={(day) => {
    return {
      sx: (theme) => ({
        // 基础样式：未选中日期的外观
        backgroundColor: day.isSelected ? theme.colors.blue[6] : 'transparent',
        color: day.isSelected ? theme.white : theme.black,
        // 悬停样式：根据选中状态调整
        ...theme.fn.hover({
          backgroundColor: day.isSelected ? theme.colors.blue[7] : theme.colors.violet[7],
          color: theme.white,
        }),
        // 可选：为选中日期额外添加边框、字体加粗等样式
        ...(day.isSelected && {
          borderRadius: theme.radius.md,
          fontWeight: 600,
        }),
      }),
    };
  }}
/>

关键说明： #

• getDayProps会为每个日期单元格传入day对象，其中isSelected字段标记该日期是否被用户选中
• 通过三元表达式，为选中和未选中的日期分别设置不同的backgroundColor和color
• 利用theme.fn.hover统一处理悬停状态，同时针对选中日期调整hover时的颜色
• 可以通过扩展运算符添加额外的选中样式（如圆角、字体加粗），让选中状态更突出

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