Styling mat-form-field input in Angular/Material

Question

I have a mat-form-field with input that I am wanting to add a custom style to, however I cannot find any documentation regarding this on the official Angular Material websit

Answer 1

You can use the css selector you use below:

/deep/ .mat-input-underline {
   background-color: white;
}

The /deep/ combinator is slated for deprecation in Angular, so its best to do without it. Unfortunately, the .mat-input-underline from Angular Material is highly specified, which makes it very difficult to override without using /deep/

The best way I have found is to use an ID, which allows you a higher specificity compared to the default Angular Material styles.

 

    
      Search
      
      search
    

Then, your 'search-form' id can be used to target the input. You can't target the mat-form-field-underline in the component.scss without breaking your view encapsulation. It's easier to do this at the global level, by adding this to your global.scss

global.scss:

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

I hope the Angular Material team pulls back their specificity in the future, because currently there's no easy way to override their defaults.