如何修改FullCalendar中fc-today的背景色？sx属性不生效问题

问题原因 #

你用MUI的sx属性没生效，大概率是因为FullCalendar的.fc-today是全局类名，MUI的sx默认会给样式添加局部作用域的哈希后缀，导致选择器匹配不到目标元素；或是原有样式的优先级比你写的更高。

可行解决方法 #

方法1：用:global包裹全局类名

在sx里通过:global指定匹配全局类，避开MUI的局部作用域干扰：

sx={{
  "& :global(.fc-today)": {
    backgroundColor: colors.redAccent[500],
    // 若仍不生效，可临时加!important（优先不用）
    // backgroundColor: `${colors.redAccent[500]} !important`
  }
}}

方法2：提高选择器特异性

不想用:global的话，可写更精确的选择器，匹配FullCalendar的DOM层级（比如月视图的日期单元格），通过提升优先级覆盖默认样式：

sx={{
  "& .fc-daygrid-day.fc-today": {
    backgroundColor: `${colors.redAccent[500]} !important`
  }
}}

方法3：全局注入样式（备选）

如果上面的方法都无效，也可以在全局CSS中直接定义：

.fc-today {
  background-color: #你的颜色值 !important;
}

注意这种方式会影响所有FullCalendar实例，适合全局统一修改的场景。

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