scharfkantiges Material mdInput Rand um die Steuer

Question

Ich mag würde meine mdInput Kontrolle, um Stil eine schwarze Box um es zu haben:

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

Ich habe versucht, mit style = "border ein div um die Eingangskontrolle zu setzen: 1px tiefes Schwarz;" Es wird jedoch nur um das Eingabesteuerelement herum eingerahmt. Ich habe versucht, einen Rand zum MD-Form-Feld hinzuzufügen, aber es grenzt nur an den linken und rechten Rand (nach der Höhe, wenn ich in der Lage wäre, Rand oben und unten zu bekommen, sieht es so aus, als ob ich in der Lage wäre) um das zu erreichen?

Answer 1

Empfohlene Methode zum Überschreiben von Standard-Material2-Stilen ist die Verwendung von ViewEncapsulation. deep, ::ng-deep und >>> abgeschrieben und fiel vielleicht in Zukunft (official documentation).

Der Schatten-piercing Nachkomme combinator ist veraltet und Unterstützung ist von gängigen Browsern und Werkzeugen entfernt werden. Daher planen wir, Unterstützung in Angular (für alle 3 /deep/, >>> und :: ng-tiefe) zu fallen.

---

Um einen Rahmen für die Eingabe, gehören die folgenden in Ihrem Set component.ts:

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

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

... dann fügen Sie einfach die folgenden in Ihrer Komponente Stile:

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

Hier ist eine working demo.

Answer 2

Versuchen Sie folgendes:

::ng-deep .mat-input-wrapper{ 
background-color:black; 
} 

oder (je nachdem, was Sie brauchen)

::ng-deep .mat-input-wrapper{ 
    border: 2px solid black; 
} 

DEMO

Verkapselung: ViewEncapsulation.None hat es Nachteil ist, dass es alle Klassen auswirken wird, Sie wünschen es oder nicht. Es ist immer noch nicht veraltet und ich denke, es wird nur durch etwas anderes ersetzt.