How to overwrite angular 2 material styles?

Question

I have this select in angular material:

Its code :

<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

And I would like to have this styles in it:

I tried to put some classes over md-select and md-option, but not worked. I would like to have maybe just an example of how to put the background color or the border and that would give me an idea.

Thank you in advance

I exactly do not know how to for example put the border of the options. — Kimy BF, Apr 29 '17 at 00:02
Not all HTML elements that Angular generates are marked with the component name, so the component css has only limited value. — TAM, Mar 01 '18 at 10:57

score 53 · Accepted Answer · answered Apr 29 '17 at 02:11

53

I think classes should work, but you may need to use /deep/ because of the view encapsulation.

Try this:

/deep/ md-select.your-class {
  background-color: blue;
}

You can also play with theming.

answered Apr 29 '17 at 02:11

André

12,497
6
42
44

20

Note: the `/deep/` selector, as well as `>>>` and `::ng-deep` are all being deprecated. More information [here](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). Unfortunately there does not appear to be a replacement. – cmegown Nov 08 '17 at 20:24
5

There better be a replacement. That would be a big mistake to remove without one. – Michael Oct 10 '18 at 15:19
Although its deprecated, but this is still working until now, the fastest and simplest solution. – Waleed Asender Jun 30 '19 at 04:38
On Angular use ::ng-deep .className { color: #8d062a !important; } – Cesar Vega Mar 17 '21 at 08:13

Andrew · Answer 2 · 2019-01-28T23:27:51.413

The top solutions of /deep/, >>> and ::ng-deep are being deprecated and should no longer be used.

The recommended method is now view encapsulation

Edit: Word of warning. I do not recommend using this method at all (as of Jan 2019) as setting ViewEncapsulation.None will result in any of that components css becoming global styles (it stops Angular from creating ng_xxx attributes for component scoped css). This will result in global style conflict, especially with lazy loaded module css.
Our solution to ViewEncapsulation was to override very specific css using highly specific css selectors in 1) global css or 2) creating separate style files for certain views / styles / elements, importing into every component required (e.g. styleUrls: [material-table-override.css, component.css]).

I used ViewEncapsulation.None to successfully override material table styles within a single component in Angular 6.

On your component:

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

Here's a great article on the subject

This solution is in some cases not optimal because it overrides CSS styles of the parent component if a mat-dialog component is being used. A better solution should manipulate material compnents within the boundaries of the dialog component. — Lukaesch, Jan 04 '22 at 23:00

score 13 · Answer 3 · edited May 23 '17 at 12:18

If you can solve your style issues with the material 2 scss theming that would be the "right" way hears is a link to there site. https://material.angular.io/guide/theming.

However I used !important on the styles I didn't want materials styles to overwrite.

Here is how I used it:

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

I had a situation where a horizontal scroll bar was showing up in the md-sidenav and I got rid of their default padding on the md-dialog.

Not the most elegant solution but I hope this helps.

This is another StackOverflow question that discusses what !important is.

What does !important in CSS mean?

Yeah I'm finding I have to slap !important everywhere to override the Material styles. This is very annoying. — Jake Shakesworth, Aug 21 '18 at 23:59

score 11 · Answer 4 · answered Aug 07 '18 at 21:42

11

The correct way to change styles of overlay classes like mat-dialog-container is to use panelClass according to Customizing Angular Material component styles:

Add this to your global stylesheet after your theme setup

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

Use the following to open the dialog

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

answered Aug 07 '18 at 21:42

Florian Feldhaus

5,567
2
38
46

I like this and is the cleanest answer I have seen so far. – Charlie-Greenman Nov 08 '20 at 14:47

score 10 · Answer 5 · answered Dec 30 '19 at 12:31

10

you can use:

::ng-deep {
 .mat-dialog-container{
   padding: 0px 
 }
}

answered Dec 30 '19 at 12:31

heliya rb

682
8
26

2

This is very dangerous solution, becouse this will affect all components in whole app. If you want it like this, you can override in golbal style.scss. Otherwise, prefix ng-deep with some selector. Like :host ::ng-deep or .mat-dialog-override::ng-deep... – prespic Mar 05 '21 at 13:08

score 7 · Answer 6 · answered Sep 21 '19 at 05:33

7

::ng-deep works like a charm for me... for scss and sass file.

answered Sep 21 '19 at 05:33

KRIPA SHANKAR JHA

431
7
8

score 2 · Answer 7 · answered Apr 26 '19 at 09:02

2

I do it this way whenever I have to remove scroll from mat-sidenav-container

   .mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
      overflow: hidden;
    }

answered Apr 26 '19 at 09:02

Divyanshu Rawat

4,421
2
37
53

1

great solution. prevents your changes to mat-sidenav-content in that component from interfering with other instances of mat-sidenav-content – clk Jun 17 '21 at 19:07
glad it helped! @clk – Divyanshu Rawat Jun 18 '21 at 20:48

score 1 · Answer 8 · answered Sep 27 '20 at 07:15

I was facing the same issue with Angular Material, I inspected the select element, checked its classes and tried to overwrite the css rules for material css classes , even tried !important flag for style rules. But it was not working.

Moving all such rules from component to index.html worked for me.

.mat-select-value,
    .mat-option-text,
    .mat-standard-chip,
    .mat-input-element,
    .mat-menu-item {
         color: #666 !important;
         font-size: 13px !important;
     }
}

score 1 · Answer 9 · answered Nov 05 '20 at 16:52

1

you can use :root as well

:root {
    .mat-dialog-container{
        padding: 0px 
    }
}

answered Nov 05 '20 at 16:52

Ihor

571
6
10

score 0 · Answer 10 · edited Sep 04 '18 at 14:31

0

You can try adding this code.

.mat-dialog-container{
     padding: 0px !important;
}

If this does not work you can use

/deep/.className {
... your code goes here
}

edited Sep 04 '18 at 14:31

Capricorn

2,061
5
24
31

answered Sep 04 '18 at 13:49

Prashanth Damam

841
8
25

score 0 · Answer 11 · answered Feb 24 '23 at 10:28

Me also faced this kind of situation, but I found a permanent solution to over come this.

If we use ::ng-deep or :root/CLASS_NAME or ViewEncapsulation it may affect other components also. So what you can do is,

Make sure your global style sheet is present at the end of styles array in your angular.json file

"styles": [
      "@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css"     <-----------
    ],

Inspect your code and get the relevant class from the browser
Get the relevant class and override it in your global style file (styles.css)

 .mdc-dialog__surface{
    background-color: antiquewhite !important;
    box-shadow:none !important;
  }
  
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0.5;
  }

Updated style output

Similarly you can modify other Angular material components and Bootstrap inbuilt styles also.

score -1 · Answer 12 · answered Jun 12 '20 at 09:52

-1

Anyone looking for a cleaner approach in 2020, use the panelClass as suggested in the material mat-select documentation. Use the panelClass property

answered Jun 12 '20 at 09:52

RBG

91
9

How to overwrite angular 2 material styles?

12 Answers12

Linked

Related