CODEWITHSUNDEEP
cssangularangular-material
Aaron Ting
Aaron Ting

Reputation: 123

Override Angular Material CSS differently in different components

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?

Upvotes: 5

Views: 10804

Answers (3)

Morteza Ebrahimi
Morteza Ebrahimi

Reputation: 760

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{}
}

Upvotes: 10

wentjun
wentjun

Reputation: 42516

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 */
}

Upvotes: 2

Seba Cherian
Seba Cherian

Reputation: 1793

You can use ::ng-deep. Refer NgDeep

Upvotes: 0

Related Questions