Как переопределить angular 8 цветов стилей материала, используя переменную?

Question

Мне нужно изменить цвет фона для этого css кода

.mat-toolbar.mat-primary {

фона

: # d12626; цвет: #fff; }

.mat-toolbar.mat-primary {
    background: #d12626;
    color: #fff;
}

Мне нужно изменить background для приведенного выше кода. Как это сделать
Я пытался

 [ngStyle]='    .mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }
'

Но не работает
Затем я получил другое предложение от stackoverflow

[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need  [style.mat-toolbar.mat-primary.background]='#d12626'; but not working

I использовал этот

.mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }

код внутри CSS кода, и он работает, но мне нужно динамически менять цвет.
Мне также нужно обновить его цвета
primaryColor
primaryLightColor
primaryDarkColor
вторичный Color
вторичныйLightColor
вторичныйDarkColor
primaryTextColor
вторичныйTextColor
* 1037

Answer 1

матричный динамический c цвет будет возможен, если основной набор, заданный переменной css вместо значений c hex, кто-то уже опубликовал sh библиотека , чтобы решить эту проблему путем перезаписи основной цвет, который будет использоваться css переменными.

1️⃣ установить angular -материал- css -vars библиотека npm i angular-material-css-vars -S

2️⃣ импорт MaterialCssVarsModule в модуле приложения

@NgModule({
  imports: [
    ...
    MaterialCssVarsModule.forRoot(),
  ],
   ...
})
export class AppModule {}

3️⃣ используйте эту услугу ? MaterialCssVarsService для изменения angular основного цвета материала, например основного, вторичного, теплого ...

export class component {
  constructor(public materialCssVarsService: MaterialCssVarsService) {
    const hex = "#3f51b5"; // set default color color
    this.materialCssVarsService.setPrimaryColor(hex);
  }

  setPrimaryColor(color: string) {
    this.materialCssVarsService.setPrimaryColor(color);
  }
}

вам нужно удалить любой существующий @import '~ @ angular / material / theming'; из вашего основного файла таблицы стилей.

? demo ?‍♂️

вы можете проверить этот вопрос create angular тема материала с css переменными для получения дополнительной помощи

Answer 2

не устанавливайте цвет материала в качестве основного или дополнительного, тогда вы можете использовать ngStyle следующим образом.

<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
  <mat-toolbar-row>
    <span>Main Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>

bgColor - это просто свойство компонента, когда вы не устанавливаете свойство цвета, компонент не имеет У него нет никакого класса, поэтому легко изменить стиль

demo ?

Answer 3

Без взлома невозможно на лету изменить цвета вашего angular приложения, потому что способ стилизовать ваше приложение с помощью Angular Материал - использовать темы (это описано здесь https://material.angular.io/guide/theming) и ваши тематические файлы css будут скомпилированы в css во время сборки.

Я думаю, что единственный способ изменить цвет вашего приложения на лету - это определить шестнадцатеричный цвет, который вы хотите изменить (для основного, дополнительного и т. д. c ...), и вы переписываете свой стиль тега в своем документе, используя serch / replace.

Но имейте в виду, что Angular Материал не предназначен для Позвольте пользователю изменять тему и цвета, потому что они предоставляют палитру и оттенок, которые были разработаны, чтобы обеспечить хороший контраст и лучшие практики в отношении UX. Вот почему решение, которое я даю вам, действительно взломано.

Answer 4

Dynami c стили

Вы должны задать свойства CSS как верблюд, так как font-size должно быть таким [style.fontSize.px]. Вы проверяете другие решения из как применить динамические c -тили? .

Переопределить стили

Мы можем сделать это, используя комбинацию :host с селектором ::ng-deep и, наиболее вероятно, использовать для переопределения стилей Material :

:host ::ng-deep h2 {
    color: red;
}

Пользовательская тема для Angular Материал

Вы можете изменить набор цветов, которые будут применяться к компонентам Angular Материал. https://material.angular.io/guide/theming

Answer 5

Вы не использовали ngStyle правильно.

Добавьте этот код ниже.
. html

<p [ngStyle]="{'background-color':getBackGroundColor(), 'color' : getColor()}" >
  Start editing to see some magic happen :)
</p>

.ts

getBackGroundColor(){
    return 'red'
  }
   getColor(){
     return 'blue'
   }

Вот демонстрационная ссылка где вы также можете проверить результат