样式化 md-input-element

Question

我正在尝试在 md-input 上设置 .md-input-element 的样式，这是默认从 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

试试下面的选择器

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

Answer 2

如果您在包含提到的 html 代码的组件中设置样式，那么它将不起作用，因为标准 ViewEncapsulation。默认 ist Emulated 并将在运行时将您的 CSS-选择器更改为如下所示：

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

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

现在你有三个选择

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

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

样式化 md-input-element

Styling md-input-element

html

css

styling

angular-material2

angular