全局定制 Angular Material UI 外观的方法和最佳实践？

Question

我在项目中使用 Angular 16 和 Angular Material UI 组件，我想应用自定义样式，如圆角、双边框输入、自定义字体等。我通过使用

!important

覆盖 Material CSS 类来实现这一点，但我不确定这是否是最佳实践。

这是我如何覆盖 CSS 类的示例：

.mat-form-field {
  border-radius: 8px !important;
  border: 2px solid #000 !important;
}

我有几个问题：

是否建议使用
```
!important
```
覆盖Material UI类？这是否会导致潜在的问题，例如在未来的更新中破坏样式或导致意外行为？
使用 Mixins： 我遇到过使用 mixins 而不是
```
!important
```
来应用自定义样式的建议。我在哪里可以找到合适的 Angular Material mixin，您能否提供一个示例来说明如何使用它们来避免这些问题？
任何有关全球定制 Angular Material 组件最佳实践的指导，我们将不胜感激。谢谢！

Answer 1

通过定位元素的选择器来覆盖 Angular 材质样式（无论是否带有

!important

）都不是好习惯。原因是 Angular Material 不能确保这些选择器保持不变。他们可能会进行重构或重命名，这可能会破坏您的代码。相反，如果可能的话，您应该为其 CSS 变量提供新值。例如，要更改表单字段的边框半径，请将以下 CSS 添加到您的

styles.css

:

:root {
  --mdc-filled-text-field-container-shape: 8px;
}

要了解它们使用哪些 CSS 变量，您可以使用浏览器的 DevTools 检查 DOM。