Change Angular 2/4 Material Default Styles For "md-menu"

I'm trying to change default Angular Material styles of md-menu. The problem is the Angular Material generates elements dynamically and I can't get access to them from my HTML. Her

Solution 1:

Check if using /deep/ is an option for you.

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies to both the view children and content children of the component.

Doc

component.css:

/deep/ .mat-menu-content {
    background: skyblue !important;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}

/deep/ .mat-menu-item {
    padding: 0000!important;
}

demo

Solution 2:

Described in the picture below,Maybe this doc would help