angular - 组件的 Angular Material 12 自定义主题未按预期工作

Question

我在这里完全迷失了，你可以在这里找到的所有文档或媒体似乎都没有帮助，而且似乎已经过时了。

具体来说，我正在尝试使用@mixins 或调整部分组件主题方面。

在我可以很好地获得每个组件的排版和调色板。

但是，如果我想调整前景/背景（我不知道有什么区别），我无法得到任何预期的结果。

我的主题在这里调整为我的自定义调色板：

$my-custom-primary: mat.define-palette(alive.$my-custom-palette-primary, 900);
$my-custom-accent: mat.define-palette(alive.$my-custom-palette-secondary, 900, A100, A400);

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

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-custom-primary,
    accent: $my-custom-accent,
    warn: $my-custom-warn,
  )
));

那行得通，我可以用颜色和排版调整每个主题

但是，我的调色板或材质模块中的实际调色板绝对没有调整明暗前景。我没有做任何事情来调整实际的前景色/背景色

奇怪的是，主题说定义调色板前景和背景表明设置将来自我的自定义调色板

// node_modules/@angular/material/core/theming/_theming.scss
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
    is-dark: false,
    foreground: palette.$light-theme-foreground-palette,
    background: palette.$light-theme-background-palette,
  );
}

我想要做的是更改禁用按钮的颜色：

// none of this does anything in my palette or materials palette 
$light-theme-background-palette: (
  status-bar: map.get($grey-palette, 300),
  app-bar:    map.get($grey-palette, 100),
  background: map.get($grey-palette, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map.get($grey-palette, 300),
  selected-disabled-button: map.get($grey-palette, 400),
  disabled-button-toggle: map.get($grey-palette, 200),
  unselected-chip: map.get($grey-palette, 300),
  disabled-list-option: map.get($grey-palette, 200),
  tooltip: map.get($grey-palette, 700),
);

我不知道我只是迷路了。只是去css大声笑。

标签： angulartypescriptsassangular-materialscss-mixins