How to change Material colors (e.g. mat-menu-item-label-text-color)

I would like to change the color of the menu item text in my Angular Material application. From the screenshot below it looks as though this color is set by a variable named mat-menu-item-label-text-color.

How do I override the value of variables like this?

>Solution :

The best way to do it is to set your own theme.
However if you don’t want to set any custom themes, there is some other possibilities to do this as explained in the official documentation.

1. Modify the class in a global stylesheet. Global stylesheets are listed in the styles array in your angular.json configuration file.
   Example:

// Add this to your global stylesheet after including theme mixins.
.mat-mdc-menu-item-text {
  color: blue;
}

2. Disable view encapsulation for your component. With this you will basically achieve the same result as Nr.1 but in a different way. If you disable the view encapsulation of your component, it makes the stylesheet linked to that component globally accessible and so the modification would apply too. Keep in mind, this means ALL stylings and classes of that component will be global!

This is how you would disable the view encapsulation:

// in your component.ts
@Component({
    selector: "my-component",
    templateUrl: "./my-component.html",
    styleUrl: "./my-component.scss",
    encapsulation: ViewEncapsulation.None
})

3. Apply the deprecated ::ng-deep pseudo-class to a CSS rule. This is deprecated but still supported on most browsers. How this function exactly works is explained in the official Angular Documentation.

Example usage would be:

// Add this to your component stylesheet.
::ng-deep .mat-mdc-menu-item-text {
  color: blue;
}

Conclusion:

I would highly suggest you to use a customized theme and apply it to your angular application or only on the specific component (menu-item).
If you still don’t want to create your custom theme. Then I would suggest you the first approach with a twist. Instead of just changing the class globally, create a parent class and then modify the menu-item class, this way, you can at least still control where to apply your own design.

Example:
Example usage would be:

// Add this to a global stylesheet.
.blue-menu-item {
    .mat-mdc-menu-item-text {
            color: blue;
    }
}

This way, whenever you use the menu-item you can add your parent class blue-menu-item to your component and it will be only applied there.

Some people would suggest to use the ::ng-deep, they argue it wont be removed for a very long time. However I try to avoid deprecated features at all costs. I guess it is a preference, I could also understand if someone decides to use it after all.