1

I've already tried:

 :host ::ng-deep .mat-list-item-content{
    flex-direction: column
    }

(got solution from this Override Angular Material style in Angular component)

.myClass {flex-direction:column}, then added my class to mat-list-item-content

but the field always get overridden enter image description here

kosist
  • 2,868
  • 2
  • 17
  • 30
usernumber124153
  • 113
  • 1
  • 8

2 Answers2

2

To add on top of @adrian-sawicki's answer, it's also better to turn off View Encapsulation below:

@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
encapsulation: ViewEncapsulation.None
})

Once you have done this, you don't have to rely on ::ng-deep or :host ::ng-deep etc as they are deprecated.

For instance, if you want to override padding for mat-list-item, all you have to do is

.example-container .mat-list-base .mat-list-item .mat-list-item-content {
  padding: 0 !important;
}
Steffi Keran Rani J
  • 3,667
  • 4
  • 34
  • 56
  • 1
    @Ousama Thank you:) – Steffi Keran Rani J Apr 15 '21 at 16:11
  • What side effects does `ViewEncapsulation.None` bring? – Marcel Jul 19 '21 at 14:12
  • @Marcel it will work the same as you would put your styles in a global file like style.scss - so it can lead to issues with wrong styles separation and you might spend some time later to find the cause of "Why my styles are overwritten by something?" In my opinion component styles should be specififc to the component itself. You need a global style -> add it to global style file or create such. – Adrian Sawicki Jul 22 '21 at 12:23
1

Don't use ng-deep and !important.

ng-deep is deprecated.

!important is not a really good practice.

Write more specific styles in your global style file. Add some kind of container / class on higher element and add for example:

.example-container .mat-list-base .mat-list-item .mat-list-item-content {
  background: red;
}
Adrian Sawicki
  • 590
  • 5
  • 22
  • 1
    While I agree that the usage of !important is not necessarily good practise, making your CSS selectors more specific is also not necessarily good practise either.. This is a common downside of styling other people's components. I've been reading that ng-deep is deprecated, but I haven't found any good solution to not using it.. do you have any suggestions? – Rutger van Dijk Nov 13 '19 at 08:32
  • I actually starting reading about, a good stackoverflow post about ng-deep: https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – Rutger van Dijk Nov 13 '19 at 08:35
  • I gree too , ng-deep is deprecated. I found a solution for this by using ViewEncapsulation.None. here s a link if you want to read more about this : https://angular.io/guide/component-styles#view-encapsulation – Mehdi Ayari Nov 13 '19 at 08:57
  • Well, I agree but if we're going to overwrite other people's styles I guess it's better to make them more specific and hold all changes in one place (If we want to avoid !important hell). About Encapsulation.None It's almost the same as adding it to the global style file. The only difference is where you will hold those styles. – Adrian Sawicki Nov 13 '19 at 09:03
  • Well, ng-deep is deprecated for a long time but still, you have to have it in mind that they might remove it from x version of angular and if you would like to update your project later you would have to change it. If you have a possibility to avoid using it avoid it. – Adrian Sawicki Nov 13 '19 at 09:06