Is there a way to use CSS to set appearance=’fill’ or ‘outline’ on a mat-form-field without having to use {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
?
I’m asking because I want to use appearance='outline'
for editable form fields and appearance='fill'
for disabled ones.
No. The DOM is different for filled and outlined fields, so it cannot be set via CSS. But you can try to dynamically set the appearance
attribute:
<mat-form-field [appearance]="isDisabled ? 'fill' : 'outline'">
</mat-form-field>