Question

对角色材质表单进行主题的正确方法是什么？对于组件本地？

我的组件模板中有一些表单元素，如下所示：

<mat-form-field class="signin-input">
    <mat-label>Email</mat-label>
    <input matInput type="email" formControlName="email">
</mat-form-field>

我希望占位符文本和标签最初是#FFF，它是＃000;＃000。我将这些样式添加到组件scss，但它们没有生效：

.mat-form-field-label,
.mat-focused .mat-form-field-label {
    color: #FFF !important;
}

我看到 theming.scss 中的样式始终被应用，无论我的样式表如何：

@mixin mat-form-field-theme($theme) {
    ....
    ....
    .mat-focused .mat-form-field-label {
        color: #000;

        &.mat-accent {
            color: #000;
        }

        &.mat-warn {
            color: #000;
        }
    }

我希望颜色为 #FFF ，但它们总是＃000 。我找到this link，但对于像这样的简单改变来说太麻烦了。

我该怎么做？

PART-B

我看到我写的样式附有 [_ ngcontent-c16] 。我发现从开发控制台动态删除此标记会使我的样式生效。这是什么[_ngcontent-c16]？

该项目是从angular-cli建立的，我是SCSS和Angular5的新手（我在Angular 1上做过广泛的工作）

Answer 1

编写简单的CSS样式不会覆盖它，我们需要使用一个名为host的特殊选择器。 More about it here

这对我有用：

:host {
    .mat-form-field-label,
    .mat-focused .mat-form-field-label {
        color: #FFF !important;
    }
}

如何为Angular材质表单添加自定义样式

1 个答案: