Mat-calendar单元格角落hover原始颜色未覆盖，如何修改？

我想要修改Mat-calendar元素的hover颜色，目前已通过以下CSS代码实现了部分效果：

.mat-calendar-body-cell-content:hover {background-color:#something }

但存在问题：当光标停留在单元格角落时，仍会显示原始紫色（配图：Mat-calendar角落hover效果），请问如何编写CSS来覆盖该颜色？

解决方案 #

那个角落的hover效果来自mat-calendar-body-cell的伪元素:hover::before，你需要同时覆盖这个伪元素的样式：

/* 覆盖单元格内容的hover背景 */
.mat-calendar-body-cell-content:hover {
  background-color: #your-target-color;
}

/* 覆盖单元格角落的hover伪元素背景 */
.mat-calendar-body-cell:hover::before {
  background-color: #your-target-color;
}

如果上述样式被默认样式覆盖，可添加!important提升优先级（不推荐过度使用，优先通过提升选择器权重解决，比如给选择器加上组件的父类名）。

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