Angular Material - 如何在悬停期间更改边框颜色？答案

【问题标题】：Angular Material - how to change border color during hover?Angular Material - 如何在悬停期间更改边框颜色？
【发布时间】：2020-04-14 19:15:45
【问题描述】：

我尝试了所有我能想到的方法，使用 ::ng-deep，但在悬停期间我无法定位边框颜色！

我可以在开发工具中正确更改它，但我无法在代码中应用它，选择器似乎总是错误的！

这是html：

 <mat-form-field appearance="outline" class="userNameInput">
        <mat-label>Username</mat-label>
        <input matInput #email type="email" placeholder="mail@mail.com" (keyup.enter)="loadUserInfo(email.value)">
      </mat-form-field>

默认情况下，悬停边框颜色为黑色！

【问题讨论】：

你想改变哪个元素的边框颜色？悬停时的更改应该是静态的（仅限 CSS）还是基于应用的某些状态（涉及 JavaScript 逻辑）动态？
我只想要一个静态颜色！
已经使用 specificity 和 ViewEncapsulation 回答，而不是弃用的 ::ng-deep hacks，这里：stackoverflow.com/q/50786787
@hc_dev 谢谢！这不仅解决了我的问题，而且我删除了我正在使用的所有 ::ng-deep，谢谢你的信息

标签： css angular angular-material

【解决方案1】：

尝试将其放入您的 css/scss 文件中，

.userNameInput:hover {
  border: 2px solid red;
}

如果不工作！试试看，

.userNameInput:hover {
  border: 2px solid red !important;
}

希望对你有所帮助?

看看这个，

【讨论】：

这是一个 mat-form-field，这不起作用也不起作用。 ::ng-deep 必须使用
在最新的文档中提到它已被弃用。你可以参考这里angular.io/guide/component-styles#deprecated-deep--and-ng-deep
使用 !important 应该对你有用，你试过了吗？
它没有用，正确的解决方案来自评论我最初帖子的人，效果很好