Angular Material mdInput控件周围的边框

Question

我想将我的mdInput控件设置为在其周围有一个黑盒子:

    <md-form-field>
      <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
    </md-form-field>

我尝试在输入控件周围放置一个div,其中style ="border:1px solid black;" 但是它只在输入控件本身周围创建边框.我试图将边框添加到md-form-field但是它只在左侧和右侧放置边框(但是如果我能够在顶部和底部获得边框,它看起来像我能够实现的任何方式来判断高度)实现那个？

Answer 1

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

较新版本的角形式字段支持表单字段的不同外观

1. 遗产(材料默认)
2. 标准
3. 填
4. 大纲

大纲是你在寻找的

看看这里的演示

https://stackblitz.com/edit/angular-61fqsd?file=src/app/app.component.html

Answer 2

推荐的替代默认Material2样式的方法是使用ViewEncapsulation。deep，::ng-deep并且>>>已贬值，有可能在将来删除（官方文档）。

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。

要为输入设置边框，请在您的中包括以下内容component.ts：

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

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

...然后只需在您的组件样式中添加以下内容：

/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
   border: 1px solid black;
}

/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
   background: transparent;
}

/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
   background-color: transparent; 
}

这是一个工作示例。