2

How to change the color of a border of a mat-form-field ? (The border when the field is selected) thx ^^ screen

.search {
  display: flex;
  justify-content: center;
  margin-top: 1%;
  mat-form-field {
    width: 70%;
  }
}

<form class="search">
  <mat-form-field appearance="outline">
    <mat-label>Search</mat-label>
    <input matInput>
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</form>
PanDiMooN
  • 43
  • 1
  • 6

2 Answers2

3

The proper way to do it is to define a new theme for the form field. A theme consists of a primary palette, a secondary palette, and an optional warning palette, which defaults to red.

There are a number of pre-defined palettes located in node_modules/@angular/material/core/theming, but you can also define your own.

In the below example I give all form fields under the search class an orange and yellow theme.

@use "@angular/material" as mat;

$my-primary: mat.define-palette(mat.$orange-palette);
$my-accent: mat.define-palette(mat.$yellow-palette);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
  )
);

.search {
  @include mat.form-field-theme($my-theme);
}

This line: @include mat.form-field-theme($my-theme); returns all of the necessary css to change the theme of a form field. There is one of these functions for every Material component, you can see them being exported in node_modules/@angular/material/_index.scss

Note: this scss needs to be global so you need to put it in a global style file like styles.scss.

Alternatively you can make the component's scss global by disabling View Encapsulation.

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent {
  ...
}

More info: https://material.angular.io/guide/theming

As a quick hack, you could also override the css like so:

Just the border

.search
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  color: red;
}

Label as well

.search {
  .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: red;
  }

  .mat-form-field.mat-focused .mat-form-field-label {
    color: red;
  }
}

The devs don't recommend overriding css like this since it is prone to break in later versions: https://material.angular.io/guide/customizing-component-styles

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26
  • This should be the accepted answer. The information is more correct and more complete. Also works without encapsulation bit. – Selam Getachew Mar 20 '23 at 11:44
0

Wow! Thanks very much :)

I defined my own color palette here is my code ^^ style.scss

@use '@angular/material' as mat;

html {
  height: 100%;
  body {
    height: 100%;
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }
}
$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$app-palette: (
  50: #E0E0E0,
  100: #B3B3B3,
  200: #808080,
  300: #4D4D4D,
  400: #262626,
  500: #000000,
  600: #000000,
  700: #000000,
  800: #000000,
  900: #000000,
  A100: #A6A6A6,
  A200: #8C8C8C,
  A400: #737373,
  A700: #666666,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$my-primary: mat.define-palette($app-palette);
$my-accent: mat.define-palette($app-palette);

$my-theme: mat.define-light-theme(
    (
      color: (
        primary: $my-primary,
        accent: $my-accent,
      ),
    )
);

.search {
  @include mat.form-field-theme($my-theme);
}
PanDiMooN
  • 43
  • 1
  • 6