Override Angular Material CSS Differently in Different Components

Override Angular Material CSS differently in different components

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-depp insteaded)

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

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}

Angular overriding angular material, for 3 different components. Having similar material

try to add your own classes to the material component and override the material classes by your own class

for example

<mat-form-field class="custom-form-field"></mat-form-field>

and in styles.css file

.custom-form-field {
  // your styles
}

.custom-form-field .mat-input-element {
  // your styles for the inner material(html) elements
}

angular - override mat-form-field inherited styles

If you want your styles to only apply to the custom field, rather than any direct usages of mat-form-field.

You can set up your custom field with normal view encapsulation (as long as you aren't using the shadow-dom)

Then you use ::ng-deep to pierce the encapsulation.

For example one method I often use for selectors that don't select anything rendered by the component itself (ones that won't have the hash code attribute for the view encapsulation) is to select the :host element and then do a descendant combinator from there with ::ng-deep.

:host ::ng-deep .mat-form-field {
 background: pink;
}

Note, you might need to play around with things a little and double check which styles are/aren't getting applied via the dev tools.

---

Background Information

:host selects the host element. This element is what angular automatically creates as the parent of all components. It'll be kebob case component name and would be selectable via :host which gets the current component's host element (via attribute selector), or it can generally be selected via component-name {} as if it is a normal element.

The host element is what classes and inline styles get applied to, because Angular knows they are always there. There is also no way to avoid having a host element in Angular (there was a way back in angular.js)

::ng-deep as mentioned is "deprecated". The problem is... there's no replacement for it. Working with other libraries while trying to encapsulate some changes, it's easy enough to keep using ng-deep. Google has never given a removal version for it despite being "deprecated", and there have been several major versions since that deprecation. From an Angular issue, it looks like they don't plan to remove ng-deep until there's a replacement.

That being said, if you really don't want to use ng-deep, then you can remove ViewEncapsulation and replace the :host ::ng-deep by selecting the host element yourself via the host element's element selector. For example, component-name .mat-form-field{} will select .mat-form-field class only when a child of the host element component-name.

Angular - How To Organize CSS Overrides Across Components For The App

You can overwrite children CSS classes from the parent componet. this is the way:

Assuming your child component have this CSS

 .child-class {
     background-color: blue;
 }

When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:

In your parent component

:host {
     ::ng-deep{
       .child-class {
             background-color: red;
       }
     }
}

:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.

for example:

:host{
     width: 100vw;
     height: 100vh
}

And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.

So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....

Overriding Material2 Style with Custom CSS

Another option is to set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can do exactly what you tried:

.mat-datepicker-toggle {
  margin-right: 10px !important;
}

How to style child components from parent component's CSS file?

Update - Newest Way

Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.

Last Update

From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],

template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

Old way

You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow

working example : http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

---

Related Topics