Question

我正在尝试.md-input-element md-input的样式，默认情况下从angular-material.css添加md-input-element，这似乎无法开始工作。我想尝试添加字母间距样式，但它只能作为当前。控制台上的风格。有没有办法在我自己的css文件中覆盖 <div class="mdl-grid"> <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> <div class="name-padding"> <md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name" [(ngModel)]="outlet.name"> <md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint> </md-input> </div> </div> </div>的这种特定样式？

我的HTML代码如下：

.md-input-element {
    letter-spacing: 0 !important;
}

css：

    float dX;
    float dY;
    int lastAction;

Answer 1

尝试使用以下选择器

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    letter-spacing:0!important;
    border-color: orange;
}

Answer 2

如果在包含提到的html代码的组件中设置样式，那么由于标准ViewEncapsulation，它将无法工作。默认值为Emulated，并且会在运行时将CSS选择器更改为以下内容：

.md-input-element[_ngcontent-xsa-40] {
{
    letter-spacing: 1px;
}

由于附加属性，此选择器与class="md-input-element"的{{1}}不匹配。

现在您有三个选项

使用/ deep / ：您可以使用deep重写选择器。例如。 md-input阻止Angular2将隐秘属性添加到您的选择器。
更改ViewEncapsulation ：您可以将ViewEncapsulation更改为:host /deep/ .md-input-element以停止Angular2将隐秘属性添加到您的选择器。
全局样式：将样式添加到全局None以绕过ViewEncapsulation

在此处查看有关样式化组件的更多信息https://angular.io/docs/ts/latest/guide/component-styles.html

样式化md-input-element

2 个答案: