Angular Material Input 没有带有深色主题的白色文本

标签 angular sass angular-material2

目前,我正在尝试使用 Angular Material 中的深色主题。我遇到的问题是 matInput颜色还是黑色。我设置了我的 mat-form-field 的颜色到初级。我仍在学习如何实现这些自定义主题,所以我可能没有正确理解它。我可以看到 currentColor检查器中的变量是 black .请注意,我不会覆盖项目中任何地方的颜色。我现在拥有的最多的 css 是自定义主题。

我也不想从我的 sass 设置颜色我希望它自动使用主题前景色。

这是我的自定义主题 sass:

@import '../node_modules/@angular/material/theming';

@include mat-core();

$md-skyblue: (
    50 : #e5f2fd,
    100 : #bfdefb,
    200 : #95c8f8,
    300 : #6ab1f5,
    400 : #4aa1f2,
    500 : #2a90f0,
    600 : #2588ee,
    700 : #1f7dec,
    800 : #1973e9,
    900 : #0f61e5,
    A100 : #ffffff,
    A200 : #dee9ff,
    A400 : #abc8ff,
    A700 : #91b7ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$dark-primary: mat-palette($md-skyblue, 700, 500, 900);
$dark-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);

$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

@include angular-material-theme($dark-theme);

$background: map-get($dark-theme, background);

body {
    background-color: mat-color($background, background);
}

谢谢!

编辑:这是一个屏幕截图:

White text when <code>mat-form-field</code> is in <code>mat-card</code>

最佳答案

更新 -

我几天来第一次打开这个,现在它在mat-form-field中显示文本为白色.这可能只是侥幸,通过重建和服务应用程序,这次它以某种方式自我修复。这很奇怪,因为我一直在运行 ng s当我最初发布此应用程序时重建应用程序并且输入中的文本颜色保持黑色。

谢谢!

关于Angular Material Input 没有带有深色主题的白色文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52154078/

相关文章:

javascript - CSS 不适用于自定义工具提示的箭头

angular - 如何在 Angular Material 2 的 md-table 中创建子表?

angular - 我想用 If 条件更新我的 FormGroup

javascript - Angular CDKScrollable 未触发

angular - Bamboo - Angular 4 应用程序如何部署

css - SASS 误解了 attr(data-something)

javascript - 我不能用 JS 操作 CSS 显示属性?

javascript - Angular 2 : Multiple html lines of code(template) not rendering in browser

angular - 有条件地应用指令

javascript - Angular 5 Material snackbar