CODEWITHSUNDEEP
angularangular-material
ildvzg68472
ildvzg68472

Reputation: 447

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

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.

Upvotes: 1

Views: 5271

Answers (4)

J. Willette
J. Willette

Reputation: 2175

putting this in src/styles.scss worked for me (angular material v15)

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: #ffffff;
}

Upvotes: 2

Hamid
Hamid

Reputation: 103

this work by me

::ng-deep .mat-form-field-flex {
  background-color: white !important;
}

Upvotes: 0

TotallyNewb
TotallyNewb

Reputation: 4790

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.

Upvotes: 0

Vincent Lim
Vincent Lim

Reputation: 324

You may try this out:

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

Upvotes: 0

Related Questions