how to change Angular Material UI's mat-form-field backgroud-color?-CodePudding

I want to change its background color to white and only show a black underline, so it isn't obvious.

in devtools, I pick a mat-form-field, and noticed that

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgba(0,0,0,.04);
}

I guess this is why the mat-form-field has a gray background color, but after I invalid this setting in devtools(F12), the gray background color still exists.

Thanks a lot.

CodePudding user response：

You may try this out:

::ng-deep .mat-app-background {
  background-color: initial !important;
}

CodePudding user response：

All the material components will use the colors from the theme that you provided. Hence, the background color of fields will match the background color of the theme.

It doesn't mean all of the components needs to use the same styling - you can scope the themes.

There's a very handy guide in the official docs here which covers most of the basics. There are also multiple guides over the internet, and source code (look here) is really nice as well - it's pretty well documented and shows you how the pre-built themes are created and shows you how you can do more complicated stuff with theming.