如何在 Angular 16 中设置禁用 mat-form-field 的全局样式

Question

我想从角度材质 16 中的全局配置中更改禁用的 mat-form-field 的颜色。（是否可以通过在配置中定义它来在根级别上执行此操作？）

我创建了自定义材料主题和自定义材料排版。像这样：

@use "@angular/material" as mat;
@use "sass:map";
@import '@angular/material/theming';
@include mat.core();


/* Styles to be applied to Buttons */
$custom-button: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 16px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Styles to be applied to input-fields */
$custom-input: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 14px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Merge custom configs into existing config */
$custom-typography: map.merge(
    mat.define-typography-config(
        $font-family: 'Public Sans, sans-serif',
        $button: $custom-button
    ),
    (
        'input': $custom-input
    )
);

/* Custom theme colors */
$md-primary: (
    50: #e2e7eb,
    100: #b6c4ce,
    200: #869cae,
    300: #55748d,
    400: #305774,
    500: #0c395c,
    600: #0a3354,
    700: #082c4a,
    800: #062441,
    900: #031730,
    A100: #699fff,
    A200: #367fff,
    A400: #035eff,
    A700: #0054e8,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #ffffff,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #ffffff,
        A400: #ffffff,
        A700: #ffffff,
    ),
);
$md-accent: (
    50: #f2f8fa,
    100: #d4edf2,
    200: #b6e2eb,
    300: #99d7e3,
    400: #7ccce1,
    500: #1078c0,
    600: #0f6fb9,
    700: #0e66b1,
    800: #0c5da9,
    900: #0a549f,
    A100: #5e9fce,
    A200: #85b8d8,
    A400: #acd2e3,
    A700: #c0dbe7,
    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,
    ),
);

$arinspect-app-primary: mat-palette($md-primary);
$arinspect-app-accent: mat-palette($md-accent);
$arinspect-app-warn: mat-palette($mat-red);

$custom-theme: mat.define-dark-theme(
    (
        color: (
            primary: $arinspect-app-primary,
            accent: $arinspect-app-accent,
        ),
        typography: typography.$custom-typography,
    )
);

材质颜色和字体样式工作正常，但是当禁用任何 mat-form-fields 时，材质默认颜色为

rgba(0,0,0,0.36)

，正如您在材质 HTML dom 中看到的那样，它使用

--mdc-filled-text-field-disabled-input-text-color

来禁用输入文本 。我想改变，因为这样的对比度看起来不太好。我想将其更改为自定义颜色，或者增加不透明度以使其有点暗。

问题是我想通过配置来完成此操作，而不是在组件级别使用 ::ng-deep。

我可以从 ::ng-deep 做到这一点，但由于这很快就会被 Angular 团队弃用，所以也许我们可以做一个更好的解决方案。

Answer 1

您只需在

theme.scss

底部添加以下CSS即可在需要时修改默认颜色！这只是一种样式，您可以使用此方法查找变量并修改它们！

:root {
  --mdc-filled-text-field-disabled-container-color: gray !important;
}

完整代码

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// 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/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography: mat.define-typography-config(),
  )
);

// 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.
@include mat.all-component-themes($theme);

:root {
  --mdc-filled-text-field-disabled-container-color: gray;
}

Stackblitz Demo

Answer 2

试试这个

:root {
  --color-text-default: black;
  --color-text-disabled: orange;
}

// ...
$custom-theme: mat.define-dark-theme(
    //...
);

@function custom-mat-dark-theme-foreground($color) {
  @return (
    base:              $color,
    divider:           rgba(0, 0, 0, 0.12),
    disabled:          var(--color-text-disabled),
    disabled-button:   var(--color-text-disabled),
    disabled-text:     var(--color-text-disabled),
    secondary-text:    rgba(0, 0, 0, 0.54),
    text:              var(--color-text-default),
  );
}

$custom-foreground: custom-mat-dark-theme-foreground(
  mat.get-color-from-palette($theme-primary, 700)
);
// the below line sets the foreground color for all states
$custom-theme-with-fg: map.set($custom-theme, color, foreground, $custom-foreground);

@include mat.all-component-themes($custom-theme-with-fg);
@include mat.all-legacy-component-themes($my-theme-custom);

链接：https://github.com/codeandcloud/so-ng15-material