angular - Angular2-Material 更改 md-input 错误样式

Question

如果我的表单出现错误，我会更改我输入的标签以及下面的文本颜色和边框颜色，就像使用 dividerColor 一样，但没有焦点，我希望它持久。

所以我在那里为标签制作了这段代码：

md-input:not(.ng-valid) label { background-color: red !important; color:red !important; }

但是，当我运行项目时，我的 css 是这样修改的：

md-input[_ngcontent-fcu-13]:not(.ng-valid) label[_ngcontent-fcu-13] { background-color: red !important; color:red !important; } 

因此，它不起作用。你有想法吗 ？（由谷歌翻译翻译）

Answer 1

您是否尝试在描述它的组件树之外使用这种样式？像 _ngcontent-fcu-13 angular 这样的属性添加到 DOM 元素和样式以实现View Encapsulation。因此，如果您将样式作为组件元数据的一部分导入，则 Angular 会将此类属性添加到所有样式中。

您应该将全局样式移动到 app.component 或将它们直接注入 index.html。

您也可以通过添加关闭视图封装

encapsulation: ViewEncapsulation.None

进入组件的元数据

看看这篇文章。它对我有很大帮助。