代码之家  ›  专栏  ›  技术社区  ›  ufk

按角度材质主题设置文本输入颜色

  •  0
  • ufk  · 技术社区  · 6 年前

    所以我可以设置主色、强调色和警告色。

    现在我正在尝试在我的主题中设置文本输入颜色。

    不知道该怎么做。。。

    我检查了房间 mat-input placeholder 标签的颜色由以下类设置: mat-form-field-appearance-legacy mat-form-field-label .

    @import '~@angular/material/theming';
    // Plus imports for other components in your app.
    
    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    @include mat-core();
    
    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue. Available color palettes: https://material.io/design/color/
    $candy-app-primary: mat-palette($mat-indigo);
    $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
    
    // The warn palette is optional (defaults to red).
    $candy-app-warn:    mat-palette($mat-amber);
    
    // Create the theme object (a Sass map containing all of the palettes).
    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
    
    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    
    .mat-form-field-appearance-legacy .mat-form-field-label {
      color: white;
    }
    @include angular-material-theme($candy-app-theme);
    

    这并没有影响到 占位符颜色。

    任何关于这个问题的想法都将不胜感激。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Edric Prince Bansal    6 年前

    考虑查看 Customizing Component Styles

    不管怎样,你得用 !important

    // ...
    .mat-form-field-appearance-legacy .mat-form-field-label {
      color: white !important;
    }
    
    推荐文章