如何为Angular材质表单添加自定义样式-Java 学习之路

-1

对角度材料形式进行主题的正确方法是什么？

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

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

我希望占位符文本和标签为#FFF，最初是＃000 . 我将这些样式添加到组件scss， but they are not taking effect ：

.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 Build 的，我是SCSS和Angular5的新手（我在Angular 1上做过广泛的工作）

1 回答

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

这对我有用：
```
:host {
    .mat-form-field-label,
    .mat-focused .mat-form-field-label {
        color: #FFF !important;
    }
}
```
回复于 2024-05-19T00:29:12+08:00

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

1 回答

相关问题