Can we change styling of angular-material components?

Question

I want to style angular material components as per my design. I searched internet and didn't find a way to do the same.

Answer 1

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

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

2) Use ViewEncapsulation:None on that specific component. This removes all encapsulation, such that CSS rules will have a global effect. With that, you can customise the CSS properties by editing the classes on the component.css.

3) Usage of /deep/.(However, it is deprecated/soon to be deprecated, thus I won't recommend you to use it on the long term)

On your component.ts,

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

4) Supplying the directives with a custom class

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

And on your css,

.placeholder {
  color: green
}