CODEWITHSUNDEEP
cssangularsassangular-materialmaterial3
Vamsi Krishna
Vamsi Krishna

Reputation: 79

Angular Material 3 button not showing azure (#005cbb) color

This is my HTML:

<button mat-button class="basic">Basic</button>

This is my scss:

.basic {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

Despite this, I keep seeing black text with white background instead of azure text.

What I see:

enter image description here

And this is what StackBlitz has it as: enter image description here

And I copied from this StackBlitz: https://stackblitz.com/edit/ibsvoqpb?file=src%2Fexample%2Fbutton-overview-example.html,src%2Fstyles.scss

I do see this style in the chrome dev tools:

.mat-mdc-button:not(:disabled) {
    color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));
}

enter image description here

How can I get rid of the 'var(--mdc-text-button-label-text-color,' that is causing the text to be black?

Upvotes: 1

Views: 39

Answers (2)

Naren Murali
Naren Murali

Reputation: 57986

First head to the component page of material.angular.io, then click on the styling tab.

Angular Material Button Styling

Then you have to choose the appropriate token that sets the style for the element that you want.

For you scenario, this particular token text-label-text-color sets the button color:

.basic {
  @include mat.button-overrides(
    (
      text-label-text-color: red,
      // text-label-text-color: map.get(mat.$azure-palette, 50),
      // text-label-text-color: mat.get-theme-color($theme, primary), //  have to wait for a bug to be fixed for this to work, described below!
    )
  );
}

We can also use the alternative commented code, to get a particular color from a palette.

We had a mixin called mat.get-theme-color with which we can get the exact theme color, this will work in the future, you can follow the below bug to track the progress.

feat(all theming): Clean and reusable way to override all components theme colors #30244

Stackblitz Demo

Upvotes: 0

Archana Jossy
Archana Jossy

Reputation: 11

Since Material Design applies styles at a global level, you may need to use Angular's ::ng-deep selector to override those styles. Update your SCSS:

::ng-deep .mat-mdc-button {
  color: red; /* Replace 'red' with your desired color */
}

If you prefer to apply the style only to the specific button in question, force the color by using !important:

.basic {
  color: red!important; /* Replace 'red' with your desired color */
}

Upvotes: 0

Related Questions