样式化 md-input-element

Question

我正在尝试在md-input 上设置.md-input-element 的样式，该md-input 默认是从angular-material.css 添加的，这似乎我无法开始工作。我尝试添加字母间距样式，但它只能用作当前样式。控制台上的样式。有没有办法在我自己的 css 文件中覆盖 md-input-element 的这种特殊样式？

我的html代码如下：

<!-- Input Name* -->
                <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>

css：

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

Answer 1

如果您在包含上述html代码的组件中设置样式，则由于标准ViewEncapsulation，它将不起作用。默认的 ist Emulated 并将在运行时将您的 CSS 选择器更改为以下内容：

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

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

现在您有三个选择

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

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

Answer 2

试试下面的选择器

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