自定义 Angular Material 组件尺寸

Question

我正在尝试自定义 Angular Material 按钮的大小（即填充）。这些值的定义来自_button-base.scss 中名为$mat-button-padding 的变量。但是，它直接包含在button.ts 中。有没有可能调整这个值？

我已经尝试在包含材质主题之前覆盖它（因为变量是使用!default 定义的），但它没有效果，因为样式直接包含在按钮组件中。除了手动覆盖它并生成重复样式（基本上是覆盖按钮样式的附加 css 定义）之外，还有其他选项吗？

高度赞赏任何想法。

Answer 1

You can add own class in "mat-button" element like below and you can apply your own css.

<button mat-stroked-button 
color="primary" 
class="common-button">Button</button>

.common-button {
  border-radius: 4px;
  line-height: 2.5;
  height: 80px;
}