CODEWITHSUNDEEP
htmlcssangularangular-material
user226150
user226150

Reputation: 49

I cannot give style class to material-menu (Angular 2+)

I would like to set style class to mat-menu. But I have tried everything, and it seems that it doesn't pick it up unless it's in Chrome Inspect.

html 

 <mat-menu class="matMenuColor" #menu="matMenu">
             <form #logoutForm ngNoForm action="{{logoutUrl}}" method="POST">
                <input type="hidden" name="token" value="{{token}}">
                <input type="hidden" name="goto" value="{{redirectUrl}}">
             </form>
</mat-menu>

css

.matMenuColor {
    background-color: green;
}

Chrome Inspect:

.mat-menu-content:not(:empty) {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: green;
}

Upvotes: 0

Views: 667

Answers (3)

MaSza
MaSza

Reputation: 465

The quickest solution is to use :ng-deep

::ng-deep .matMenuColor {
  background: green;
}

But you can also try to change it by customize your theme.scss

Here you can find the documentation about theming Angular Material https://material.angular.io/guide/theming

UPDATE

If you don't want to use ::ng-deep because it's obsolete try this this:

.mat-menu-panel > div.mat-menu-content {
   background-color: green;
}

Upvotes: 2

lrefopam
lrefopam

Reputation: 531

::ng-deep is getting obsolete! Dont use it anymore! (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)

The best way is to create an extra css file like mat-menu.css.

Then you need to import it inside styles.css like:

@import 'mat-menu.css';

After that you need to import the styles.css in your components css like:

@import '../../../styles.css';

Inside the mat-menu.css you can style everything you want.

Here is an example of a mat-accordion (this is sass, not css):

mat-accordion
    mat-expansion-panel
        border-bottom: 1px $grey-700 solid
        color: $grey-300
        font-size: 18px
        mat-expansion-panel-header
            mat-panel-title
                color: $primary-color
                font-size: 18px

Upvotes: 1

Awais
Awais

Reputation: 4902

You can target this way

.mat-menu-panel.matMenuColor {
  background: green;
}

.mat-menu-panel is the class name for mat-menu tag which is default.

Upvotes: 2

Related Questions