React中Fluent UI DateTimePicker当前日期颜色无法修改问题求助

在React项目中使用Fluent UI DateTimePicker时，尝试修改当前日期（今日）的背景色，但默认蓝色无法被替换。

用户尝试的代码如下：

const DatetimePickerFileds = (theme) => {
  return mergeStyleSets({
    root: { 
      selectors: { 
       ".dayIsToday":{ "background-color":theme.colors.addovation70Green},  
      },   
    }, 
  });
};

<DatePicker  
 placeholder="Select a date..."
 ariaLabel="Select a date" 
 styles={controlStyleTheme.DateTimePickerStyle}
/> 

问题原因 #

直接通过根容器的selectors设置.dayIsToday样式优先级不足，Fluent UI组件内部对今日日期使用了更具体的CSS选择器（如.ms-DatePicker-day.dayIsToday），导致自定义样式被默认样式覆盖。

解决方案 #

方案1：通过datePickerCalendar样式入口定制

利用DatePicker的styles属性，直接针对日历模块定制今日日期样式，这是Fluent UI推荐的组件样式定制方式：

const customDatePickerStyles = (theme) => ({
  datePickerCalendar: {
    selectors: {
      // 匹配组件内部的具体选择器，确保优先级一致
      '.dayIsToday': {
        backgroundColor: theme.colors.addovation70Green,
        // 可选：修改今日日期的文字颜色
        color: '#ffffff',
      },
      // 可选：定制今日日期的 hover 状态
      '.dayIsToday:hover': {
        backgroundColor: theme.colors.addovation50Green,
      }
    }
  }
});

// 使用定制样式
<DatePicker  
  placeholder="选择日期..."
  ariaLabel="选择日期" 
  styles={customDatePickerStyles(theme)}
/>

方案2：使用更具体的CSS选择器提升优先级

如果仍想通过根容器的selectors设置，需要使用与组件内部一致的具体选择器，确保样式优先级足够：

const DatetimePickerFileds = (theme) => {
  return mergeStyleSets({
    root: { 
      selectors: { 
        // 更具体的选择器，覆盖默认样式
        '& .ms-DatePicker-day.dayIsToday': { 
          backgroundColor: theme.colors.addovation70Green,
          color: '#ffffff'
        },
      },   
    }, 
  });
};

补充说明 #

如果上述方式仍不生效，可以尝试在样式属性后添加!important（不推荐作为首选，仅在优先级无法通过选择器调整时使用），例如：

backgroundColor: `${theme.colors.addovation70Green} !important`

内容的提问来源于stack exchange，提问作者A M N Kumari