Issue
How can I override the CSS on the first div generated by the <mat-form-field>
?
Background
I have a bunch of fields in an <mat-card>
and the last field is causing too much padding at the bottom of the card.
<mat-form-field id="this-feels-hacky-and-wrong"...>
<!-- I want to remove the padding-bottom from this element -->
<div class="mat-input-wrapper mat-form-field-wrapper">
...
</div>
</mat-form-field>
In my stlye.css
I put
#this-feels-hacky-and-wrong div{
padding-bottom: 0;
}
and that works but there must be a better/right way to do this, no?
I would prefer a solution that is in my component.scss
file.
Solution
Try using this ::ng-deep
html
<mat-form-field class="this-feels-better"...>
component.scss
:host ::ng-deep .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
padding-bottom: 0;
}
Alternative
If you really don't want to use ng-deep
because it'll be removed in the future, and you really want to have your css rule in your component.scss
file, then you can change the component's view encapsulation to None
import {ViewEncapsulation} from '@angular/core';
@Component({
//...
encapsulation: ViewEncapsulation.None
})
However, in that case you need to make sure that you prefix all your CSS rules in that component with some kind of selector unique to the component, to prevent the rules leaking to other components.
.uniqueClassOnComponent .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
padding-bottom: 0;
}
//Other generic rules
.uniqueClassOnComponent span { ... }
Answered By - David
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.