我想将我的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但是它只在左侧和右侧放置边框(但是如果我能够在顶部和底部获得边框,它看起来像我能够实现的任何方式来判断高度)实现那个？
解决方法
覆盖默认Material2样式的推荐方法是使用
ViewEncapsulation. deep,:: ng-deep和>>>是折旧的,将来可能会被贬值(
official documentation).
The shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/,>>> and ::ng-deep).
要为输入设置边框,请在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;
}
这是working demo.
