在 angular 10 中如何减小 mat 表单域外观轮廓边框大小答案

【问题标题】：In angular 10 how to reduce mat form field appearance outline border size在 angular 10 中如何减小 mat 表单域外观轮廓边框大小
【发布时间】：2021-07-03 05:21:38
【问题描述】：

在angular 10中，使用@angular/material，如何减少悬停状态下轮廓边框的mat-form-field外观。

我可以使用以下代码修改默认边框大小：

:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

悬停时会显示这样的浓黑色

我需要在悬停时这样显示

【问题讨论】：

检查 CSS 时会发生什么？你看到赋予这种风格的选择器是什么？
我确实检查了 css.did 可能是 css 代码。但是在悬停外观粗边框线大小无法减小
在你写的代码中，没有:hover，所以确实不影响悬停状态...

标签： css angular angular-material

【解决方案1】：

如果您在浏览器中检查输入元素，您会注意到悬停状态会影响 .mat-form-field-outline 内的 3 个内部元素。因此，要强制所有这些元素在悬停状态下获得宽度为 1px 的黑色边框，您可以这样做：

.mat-form-field ::ng-deep .mat-form-field-outline-start,
.mat-form-field ::ng-deep .mat-form-field-outline-gap,
.mat-form-field ::ng-deep .mat-form-field-outline-end {
  color: black;
  border-width: 1px !important;
}

⚡这是一个工作示例：https://stackblitz.com/edit/angular-stackoverflow-66985351

【讨论】：