如何主题化角度材质组件形状？

Question

有什么方法可以用有角度的材料来主题组件形状吗？我知道材料设计有一个形状概念，允许您为所有小型/中型/大型组件创建更圆润、更圆润甚至切角的形状。有没有办法在角度材料中实现这一点？

如果不是，那么用角度材料全局定制组件的最佳方法是什么？假设我想删除所有

<mat-button>

上的圆角？

Answer 1

简短的回答是 Angular Material 没有提供一种直接的方法来执行此操作。

Angular Material 中的“主题”仅限于颜色和版式。形状、间距、大小、边框等都以某种方式“硬编码”。然而，几乎所有这些东西最终都会变成 CSS，当然总有一种方法可以自定义 CSS。例如定义一些全局样式，其功能如下：

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

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

请注意，它并不总是那么简单，因为您需要了解所有组件的内部 DOM 和类结构，以便在需要的地方应用样式。您还需要了解所有组件选项以及它们如何更改 DOM 和类结构。最重要的是，某些组件使用

ngStyle

动态注入样式，这可能无法覆盖。

长话短说——“重新设计”Angular Material 充其量只是大量工作，而且更现实的是并不是 100% 可以实现的。如果 Angular Material 不太符合您的需求，请使用其他材质。

Answer 2

接受的答案对于 Angular Material 2 来说很好，但是对于版本 3 有不同的方式。他们大量使用“设计令牌”，以 CSS 自定义属性的形式实现。这个想法是，您可以通过简单的 css 属性大量自定义组件的样式，这是设置 Angular Material v3 样式的唯一推荐方法 - 官方文档明确警告您直接覆盖 css 类Angular Material - 直接样式覆盖。作为一个曾经被咬过的人我只能警告你尽可能遵循这个建议，否则你在更新时会感到痛苦。

官方文档已更新，现在包含样式部分，您可以在其中查看每个组件支持的所有令牌：Angular Material - 按钮样式

例如，您可以像这样更改形状：

html {
  --container-shapee: 8px;
}

为您的整个网站全局更改此设置或

.some-class {
  --container-shapee: 8px;
}

仅更改页面的一部分。在我看来，这是一个非常好的解决方案，您可以使用一些 css 属性彻底改变组件的设计