求助：如何修改mat-checkbox鼠标悬停时的边框颜色？

你的代码问题出在选择器的嵌套逻辑上——你给.mat-checkbox-frame也额外加了:hover，这意味着只有当鼠标同时悬停在整个复选框容器和边框元素上时，样式才会触发，这显然不符合你“鼠标一碰到复选框就改边框色”的需求。

试试把代码改成这样：

::ng-deep .mat-checkbox:hover .mat-checkbox-frame {
  border-color: red !important;
}

为什么这样能生效？ #

• 去掉.mat-checkbox-frame后的:hover，只要鼠标悬停在整个复选框组件（.mat-checkbox）上，就会触发内部边框元素的样式变化。
• !important用来确保我们的样式优先级足够，覆盖Material Design默认的悬停样式。

如果还是不生效，可以试试这两个补充方案：

1. 更精确的选择器：加上你组件的类名，避免被其他样式规则干扰

::ng-deep .your-component-class .mat-checkbox:hover .mat-checkbox-frame {
  border-color: red !important;
}

2. 使用全局样式：把这段代码放到项目的全局styles.css里，无需::ng-deep（但注意会影响所有mat-checkbox组件）

.mat-checkbox:hover .mat-checkbox-frame {
  border-color: red !important;
}

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