控件周围的 Angular Material mdInput 边框 [英] Angular Material mdInput border around the control

问题描述

我想设置我的 mdInput 控件的样式，使其周围有一个黑框:

I would like to style my mdInput control to have a black box around it:

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

我试图用 style="border: 1px solid black;" 在输入控件周围放置一个 div；但是它只在输入控件本身周围创建边框.我试图向 md-form-field 添加边框，但它只在左侧和右侧放置边框(但如果我能够在顶部和底部获得边框，则根据高度判断它看起来我能够实现)任何方式实现这一目标?

I tried to put a div around the input control with style="border: 1px solid black;" however it is creating border only around the input control itself. I tried to add border to md-form-field but it puts border only on the left and right (yet judging by height if I would be able to get border on top and bottom it looks like I would be able to achieve) any way to achieve that?

推荐答案

推荐的覆盖默认 Material2 样式的方法是使用 视图封装.deep、::ng-deep 和 >>> 已折旧，将来可能会删除(官方文档).

Recommended way to override default Material2 styles is to use ViewEncapsulation. deep, ::ng-deep and >>> are depreciated and maybe dropped in future (official documentation).

不推荐使用阴影穿透后代组合器，支持是从主要浏览器和工具中删除.因此，我们计划放弃支持 Angular(对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个).

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
})

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

... then just add the following in your component styles:

/* 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; 
}

这是一个工作演示.

这篇关于控件周围的 Angular Material mdInput 边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！