从材料 14 迁移至材料 15。忽略他们的文档，我们当然使用现在已更改的类名更改了组件的内部样式，从而破坏了一切。我正在寻找的是如何通过主题为每个组件的内部正确创建自定义颜色样式。
一个例子是按钮，我想将按钮禁用时的背景颜色从灰色更改为蓝色。我们在 v14 中所做的只是更改“mat-button-disabled”类的样式。
如何为材质 v15 设置组件样式？ 有人有这方面的例子吗
我尝试使用我们加载到所有组件主题中的“表面”值来更新主要主题的颜色对象的背景调色板。
我尝试过硬编码，但这是我不想做的
.mat-mdc-raised-button:disabled {
--mdc-protected-button-disabled-container-color: mat.get-color-from-palette($primary-palette, 500);
background-color: mat.get-color-from-palette($primary-palette, 500);
}
还为按钮添加了一个类。但样式被“mat-mdc-raised-button:disabled”覆盖了
.custom-button {
@include button.disabled-container-fill-color(pink);
}
这是当前正在发挥作用的另一个更改，但感觉不太对劲。
.mat-mdc-raised-button[disabled][disabled] {
--mdc-protected-button-disabled-container-color: #{mat.get-color-from-palette($accent-palette, 500, 0.3)};
--mdc-protected-button-disabled-label-text-color: #{mat.get-color-from-palette($background, background, 0.3)}
}
这是我当前的主题
@use 'sass:map';
@use '@angular/material' as mat;
$primary-palette: (
50: #e3e4e8,
100: #b9bcc5,
200: #8b909f,
300: #5c6479,
400: #39425c,
500: #232d6a,
600: #131d39,
700: #101831,
800: #0c1429,
900: #060b1b,
A100: #5a7cff,
A200: #2753ff,
A400: #0032f3,
A700: #002cda,
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,
)
);
$accent-palette: (
50: #e4ebf3,
100: #bbcee0,
200: #8eadcc,
300: #618cb7,
400: #3f73a7,
500: #0075c9,
600: #1a5290,
700: #154885,
800: #113f7b,
900: #0a2e6a,
A100: #9cbcff,
A200: #6999ff,
A400: #3676ff,
A700: #1c65ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #ffffff,
A700: #ffffff
)
);
$warn-palette: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
)
);
$text: map.get($primary-palette, 900);
$secondary-text: map.get($primary-palette, 300);
$light-text: white;
$light-secondary-text: rgba(white, 0.6);
$dividers: map.get($primary-palette, 100);
$focused: map.get($accent-palette, 500);
$background: white;
$secondaryBackground: #f5f5f8;
$success: #0ccf9e;
$lite-success: #b4f0e1;
$caution: #ffb300;
$fab-background: #ffdf1c;
$highlight: #ebf6ff;
$text-highlight: #ffff00;
$warning: #e539351a;
$warning-outline: #e53935;
$tabsicons: #f581f1;
$polygon-on: #1efac180;
$polygon-off: #1b1a1c33;
$slider-gradient-1: #70cdfc;
$slider-gradient-2: #9dfcff;
$slider-gradient-3: #faff86;
$slider-gradient-4: #fdcb2b;
$slider-gradient-5: #fb3502;
$slider-thumb-1: #8f4444;
$slider-thumb-2: #08c557;
$loading-backdrop: #1B1A1C;
$background-palette: (
status-bar: map.get($accent-palette, 500),
app-bar: map.get($primary-palette, 900),
background: $background,
hover: rgba(map.get($accent-palette, 50), 0.2),
card: white,
dialog: $background,
disabled-button: map.get($accent-palette, 500),
raised-button: white,
focused-button: $focused,
selected-button: map.get($accent-palette, 50),
selected-disabled-button: map.get($accent-palette, 100),
disabled-button-toggle: map.get($accent-palette, 100),
unselected-chip: map.get($accent-palette, 300),
disabled-list-option: map.get($primary-palette, 200),
tooltip: map.get($primary-palette, 700),
secondary-background: $secondaryBackground,
custom-fab: map.get($accent-palette, 700),
active-accent: rgba($success, 0.2),
dropdown-background: $highlight,
loading-backdrop: $loading-backdrop,
);
$foreground-palette: (
base: map.get($accent-palette, 500),
divider: $dividers,
dividers: $dividers,
disabled: map.get($accent-palette, 100),
disabled-button: map.get($primary-palette, 100),
disabled-text: map.get($primary-palette, 100),
elevation: map.get($primary-palette, 300),
hint-text: $text,
secondary-text: $secondary-text,
icon: map.get($accent-palette, 50),
icons: map.get($accent-palette, 50),
text: $text,
slider-min: rgba(map.get($accent-palette, 700), 0.87),
slider-off: rgba(map.get($accent-palette, 700), 0.26),
slider-off-active: rgba(map.get($accent-palette, 700), 0.38),
active-accent: $success,
caution: $caution,
tab-icon: #f581f1,
slider-gradient-1: #70cdfc,
slider-gradient-2: #9dfcff,
slider-gradient-3: #faff86,
slider-gradient-4: #fdcb2b,
slider-gradient-5: #fb3502,
slider-thumb-1: #8f4444,
slider-thumb-2: #08c557,
warning: #e539351a,
warning-outline: #e53935,
polygon-on: #1efac180,
polygon-off: #1b1a1c33,
selected: rgba($focused, 0.1),
inactive-icon: #5F5F60,
on-surface: pink
);
$primary-palette: mat.define-palette($primary-palette, 500);
$accent-palette: mat.define-palette($accent-palette, 500);
$warn-palette: mat.define-palette($warn-palette, 700);
$custom-typography-config: mat.define-typography-config(
$font-family: 'Aeonik',
);
$primary-theme: (
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
is-dark: false,
foreground: $foreground-palette,
background: $background-palette,
),
typography: $custom-typography-config,
density: 0
);
.mdc-button[disabled] {
background: blue !important;
}