Override Angular Material CSS differently in different components

Question

I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.

When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.

Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?

And how the code looks like?

Prashant Pimpale
– Prashant Pimpale

2019-03-27 05:15:18 +00:00
Commented Mar 27, 2019 at 5:15 — Prashant Pimpale
– Prashant Pimpale, Commented Mar 27, 2019 at 5:15

Sanka Sanjeeva · Accepted Answer · 2023-11-22 09:41:50Z

10

Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)

Note: ViewEncapsulation is none here.

component.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

component.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

Solution 2: use /deep/(deprecated).(use ::ng-deep insteaded)

:host /deep/ .mat-form-field {
  text-align: left !important;
}

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}

edited Nov 22, 2023 at 9:41

Sanka Sanjeeva

3,81830 silver badges34 bronze badges

answered Mar 27, 2019 at 5:35

Morteza Ebrahimi

7601 gold badge8 silver badges22 bronze badges

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

3 Comments

Aaron Ting Over a year ago

Solution 1 worked for me thanks! I was actually already on the right track but for some reason decided only to do it in one component. Removing encapsulation for both but wrapping everything in a unique parent class works perfectly and prevents css bleeding.

Duc Nguyen Over a year ago

solution 3 work only the top of element but not work in deep. example: mat-form-field-label inside matformfield. How can I do with that?

Morteza Ebrahimi Over a year ago

:host is used to address the hosting element.that is the one that you use to add the component somewhere (e.g. <my-component>).So the selector :host /deep/ .my-class-name means, on current hosting element, go deep (search in child components too) and look for elements with class .my-class-name.(Note: /deep/ selector is now deprecated). look at: angular.io/guide/component-styles#host

wentjun · Accepted Answer · 2019-03-27 05:30:03Z

if you would like to customise your Angular material components and provide your own stylings, I have the following suggestions. You may use one of them.

1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration.

For instance,

.mat-form-field-label {
  color:blue!important;
}

2) Customising the various Angular Material directive (such as MatPlaceholder) by providing a custom class.

For instance, when we use the MatPlaceHolder, and on the component.html template,

<mat-placeholder class="placeholder">Search</mat-placeholder>

On your component.css, we can then supply the css properties to the placehodler class

.placeholder {
  color: green
}

Note: Alternatively you may use ::ng-deep, but I would strongly suggest using ::ng-deep as it will soon be deprecated.

::ng-deep .mat-dialog {
  /* styles here */
  /* try not to use ::ng-deep */
}

The problem with 1) is that this will apply everywhere, whereas I want two different styles for the same Material component in different places. 2) does not work for my specific example as the things I want to style are mat-tab-label, mat-ink-bar, etc, elements which do not appear in my html, so I can't add classes to them
I tried all the above solution and only ::ng-deep works for me because the css of element i want to override is generate on run time. Why it would be depreciate and is there any alternative

Seba Cherian · Accepted Answer · 2019-03-27 05:12:13Z

0

You can use ::ng-deep. Refer NgDeep

answered Mar 27, 2019 at 5:12

Seba Cherian

1,7938 silver badges18 bronze badges

2 Comments

Mad Scientist Over a year ago

You should not use /deep/ anywhere as it is deprecated furthermore not encapsulating the class inside a parent will cause it to be applied everywhere.

Fernker Over a year ago

It may be deprecated but there is no alternative at the moment for similar functionality.

Collectives™ on Stack Overflow

Override Angular Material CSS differently in different components

3 Answers 3

3 Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Linked

Related