Question

我是棱角材料的新手，正在尝试制作一个小型表格。

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline" >
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="outline">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

但这是我面临的一个小问题-当我给出“外观=“轮廓”时，在进行悬停/聚焦时会概述输入字段。我希望删除悬停/焦点行为。

https://eaadmxqgrggv.angular.stackblitz.io/

有人可以帮我解决这个问题或提供深入了解的方法吗？

Answer 1

To set a border for the input, include the following in your component.ts:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

在CSS中

.mat-form-field-appearance-outline .mat-form-field-outline {
      color: rgba(0,0,0,.12);
      border:0
    }

Answer 2

此CSS应该可以完成这项工作：

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

PS .：将封装设置为ViewEncapsulation。应避免使用任何封装，请在CSS中使用 :: ng-deep 。

Answer 3

这就是我的做法，并发现它是最好的使用方式 -

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: #00000026;
border:0
}

特别是在这种情况下，您可能希望这种行为贯穿整个项目，并且对于该设置 encapsulation: ViewEncapsulation.None 将正常工作。但是最好在没有 style.css -

的情况下在 ::ng-deep 中进行

.mat-form-field-appearance-outline .mat-form-field-outline {
color: #00000026;
border:0
}

将 encapsulation: ViewEncapsulation.None 设置为组件不是一个好主意，因为它会与其他组件的 css 混淆。

需要禁用<mat-form-field>焦点

3 个答案: