更改 Angular 15 中 Mat-Form-Field 的外观

Question

我想用外观“轮廓”更改 Mat-Form-Field 的外观。

所以它应该有一个白色的背景和白色的边框。

我们已经尝试使用：

encapsulation: ViewEncapsulation.none

然后

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

我们还尝试使用 ::ng-deep，尽管它已被弃用。

最后的手段是改变整个 Angular 主题。

有谁知道这是怎么做到的吗？

Answer 1

您不应该更新库的设计。他们被用来实施一个设计系统。如果你编辑这个设计，使用库有什么意义？此外，如果你保持它是最新的，这意味着你必须在每个更改组件 HTML 的新版本中更新你的代码。

除此之外，您不应该取消封装您的组件。这肯定会产生副作用。只需将您的重写代码放入styles.scss。

最后，假设您的 CSS 选择器是正确的，请知道 CSS 选择器具有所谓的优先级：与简单的相比，复杂的 CSS 选择器将首先应用。

你可以用这个

.myClass { background-color: white !important; }

如果您别无选择，但我建议您避免使用它，而是创建一个复杂的选择器来增加其优先级。