'Angular Material 13 - How to change the color of a border of a mat-form-field
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>
Solution 1:[1]
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
Solution 2:[2]
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);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | PanDiMooN |