0

我正在尝试设置默认添加的样式.md-input-element，似乎我无法开始工作。我尝试添加字母间距样式，但它只能用作当前样式。控制台上的样式。有什么方法可以在我自己的 css 文件中覆盖这种特殊样式吗？md-inputangular-material.cssmd-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;
}
4

2 回答 2

0

尝试使用以下选择器

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    letter-spacing:0!important;
    border-color: orange;
}
于 2016-11-25T06:41:43.730 回答
0

如果您在包含提到的 html 代码的组件中设置样式，则由于标准ViewEncapsulation. 默认的 istEmulated并将在运行时将您的 CSS 选择器更改为如下所示：

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

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

现在你有三个选择

  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

于 2016-11-25T07:55:52.853 回答