Angular Material - Override the overlay css at the component level

Question

I am trying to override some cdk-overlay css at the Angular component level, but it doesn't work - even if I use :host ::ng-deep

The material select dropdown here (mat-select-content) is a child of cdk-overlay-pane:

<div id="cdk-overlay-0" class="cdk-overlay-pane" style="...">
<div class="ng-trigger ng-trigger-transformPanel ng-tns-c19-5 mat-select-panel ng-star-inserted mat-select-panel-done-animating" ng-reflect-klass="mat-select-panel " style="transform-origin: 50% 6.66667px 0px; font-size: 12px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);">
<div class="mat-select-content ng-trigger ng-trigger-fadeInContent" style="opacity: 1;">
	<mat-option _ngcontent-c15="" class="mat-option mat-selected mat-active" role="option" value="Basic" ng-reflect-value="Basic" tabindex="0" id="mat-option-0">
		<span class="mat-option-text">Basic</span>
			<div class="mat-option-ripple mat-ripple"></div>
	</mat-option>
	<mat-option _ngcontent-c15="" class="mat-option" role="option" value="Advanced" ng-reflect-value="Advanced" id="mat-option-1">
		<span class="mat-option-text">Advanced</span><div class="mat-option-ripple mat-ripple"></div>
	</mat-option>
</div>
</div>
</div>

I want to move this css from my main.scss file into the component level, so it doesn't affect any other pages:

.cdk-overlay-container.dark-theme{

    .cdk-overlay-pane, .mat-select-content {    //  search panel
        background: black;
        border: .5px solid #323030;        
    } 
}

But when I move it into my.component.scss, IT DOESN'T WORK:

::ng-deep .cdk-overlay-pane, .mat-select-content {    // search panel
        background: black;
        border: .5px solid #323030;        
    }

I also need to add this style to class cdk-overlay-pane in my component scss:

element.style {
    min-width: 222.333px;
    pointer-events: auto;
    font-size: 12px;
    top: 115px;
    left: 313px;
    transform: translateX(-16px);
}

You don't need to add a comma, otherwise it treats it as a new CSS selector — user184994
– user184994, Commented Sep 22, 2018 at 4:07
Sorry, I've just looked closer, and realised that was intentional. You can try ::ng-deep .cdk-overlay-pane, ::ng-deep .mat-select-content though and see if that helps — user184994
– user184994, Commented Sep 22, 2018 at 4:32
Almost. I'm trying to isolate the style to class name .search-dropdown. So your suggestion worked here - ::ng-deep .search-dropdown .cdk-overlay-pane, ::ng-deep .mat-select-content, but this doesn't ::ng-deep .search-dropdown .cdk-overlay-pane, ::ng-deep .search-dropdown .mat-select-content . So strange. — bob.mazzo
– bob.mazzo, Commented Sep 22, 2018 at 4:48
Problem is that I can easily affect other pages within other overlays if I don't use the proper class hierarchy... — bob.mazzo
– bob.mazzo, Commented Sep 22, 2018 at 4:50

G. Tranter · Accepted Answer · 2018-09-24 16:39:43Z

4

Content within the overlay container cannot be styled from within a component because the overlay content is not a child of the component. The overlay container is a child of the page's body element, so style for its content needs to reside in your global style. However, you can selectively apply style to a specific select panel inside the overlay container using the panelClass property of MatSelect:

<mat-select panelClass="my-panel-class">...

.my-panel-class .mat-select-content {
    background: black;
    border: .5px solid #323030;        
}

answered Sep 24, 2018 at 16:39

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bob.mazzo Over a year ago

I will give that a try.

bsplosion Over a year ago

This is also the correct answer because restyling shared classes such as cdk-overlay-pane can cause unintended consequences.

Collectives™ on Stack Overflow

Angular Material - Override the overlay css at the component level

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related