angular-material - 如何主题化角 Material 组件形状？

Question

有没有办法在角 Material 中主题化组件形状？我知道 Material 设计有一个形状概念，可以让您为所有小/中/大型组件创建更圆、更圆甚至是切角。有没有办法在角 Material 中实现它？

如果不是，那么在角 Material 中全局定制组件的最佳方法是什么？假设我要删除所有 <mat-button> 上的圆角的？

Answer 1

简短的回答是 Angular Material 没有提供一种直接的方法来做到这一点。

Angular Material 中的“主题化”仅限于颜色和排版。形状、间距、大小、边框等都是“硬编码”的。然而，几乎所有这些东西最终都是 CSS，当然总有一种方法可以自定义 CSS。例如，定义一些执行以下操作的全局样式:

button.mat-button {
   border-radius: 0;
}

然后对您要自定义的每个组件和每个属性执行此操作。

请注意，它并不总是那么简单，因为您需要了解所有组件的内部 DOM 和类结构，以便在需要的地方应用样式。您还需要了解所有组件选项以及它们如何更改 DOM 和类结构。最重要的是，一些组件使用 ngStyle 动态注入(inject)样式。这可能无法覆盖。

长话短说 - “重新设计” Angular Material 充其量是很多工作，更现实地说不是 100% 可以实现。如果 Angular Material 不是您想要的，请使用其他东西。