如何在Angular Material中更改垫子形式字段的边框颜色 [英] How to change mat-form-field border color in Angular Material

问题描述

我正在尝试在Angular Material中更改我的文本框的边框颜色.现在有三种不同的颜色(用于 hover ， focus 和 idle ).如何更改这些颜色?

I am trying to change the border color for my text box in Angular Material. Right now there are three different colors (for hover, focus, and idle). How can I change these colors?

我希望它们与我的主题有所不同.

I want them different than my theme.

<mat-form-field id="test" appearance="outline">
  <mat-label class="test2">Outline form field</mat-label>
  <input matInput placeholder="name">
</mat-form-field>

有一些选项可以更改字体大小，但是我似乎无法弄清楚颜色:

There are options to change the font size, but I can't seem to figure out the color:

mat-form-field.mat-form-field {
    font-size: 16px;
    color: red;
}

这里的color属性不变.

The color attribute here changes nothing.

推荐答案

您可能已经注意到，mat-form-field中涉及边框的行为有两种.

You may have noticed there are two different behaviours in mat-form-field concerning border.

当您将鼠标悬停在其上并单击它时，它具有一种边框颜色(当然，如果您在此之前更改了外观).

It has one border colour when you hover on it and when you click on it (of course if you have changed the appearance before that).

例如，如果您正在使用:

For example, if you are using:

<mat-form-field class="example-chip-list" [color]="primary" appearance="outline"> </mat-form-field>

当您将鼠标悬停在它上面时，您会看到一种颜色，但是当您单击它时，它将采用的边框颜色将来自:

When you hover over it you will see one colour, but when you click on it the border colour it will take will be from:

[color] =主要"

[color]="primary"

如果要更改它，请遵循Angular Material提供的有关样式的准则.如果要更改鼠标悬停时的颜色(不建议使用:: ng-deep)，则需要在组件中添加ViewEncapsulation:

If you want to change it, follow the guidelines Angular Material provides on styling. If you want to change the colour which is when you hover over it (since ::ng-deep is deprecated) you would need to add ViewEncapsulation into your component:

@Component({
...
  encapsulation: ViewEncapsulation.None
})

并将以下内容添加到样式类中:

And add the following to your style class:

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

当您将鼠标悬停在元素上时，它将更改元素的颜色.

This will change the colour of the element when you hover over it.

P.S .:如果您还有一个后缀或前缀元素可以覆盖这些颜色，则只需添加以下内容:

P.S.: if you have as well a suffix or a prefix element to override those colour just add this:

  mat-form-field.mat-form-field {
    color:white;
  }

P.S .:如果要在不悬停或触摸元素时更改边框的颜色，这将有所帮助:

P.S.: if you want to change the colour of the border when the element is not being hovered over or touched this will help:

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

更新2019-05-02:

要更改主要/辅助颜色，您可以使用 http://mcg.mbitson .com/#!? mcgpalette0 =％233f51b5 生成您自己的内容并将其应用于主题.

To change the primary/secondary colour you can use http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 to generate your own and apply it in Theming.

这篇关于如何在Angular Material中更改垫子形式字段的边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！