如何将Angular Material按钮内的文本左对齐？

你之前尝试的text-align:left无效，是因为Angular Material按钮的文本被包裹在.mat-button-wrapper元素中，该元素默认使用flex布局并设置了justify-content:center，因此直接设置text-align无法覆盖默认的flex对齐规则。

可以通过以下两种方式解决：

方式一：组件内局部样式（推荐） #

在组件的CSS文件中添加以下样式：

/* 针对当前组件内所有mat-button生效 */
.mat-button .mat-button-wrapper {
  justify-content: flex-start; /* 左对齐flex布局内容 */
  width: 100%; /* 让文本包装元素占满按钮宽度 */
}

/* 仅给特定按钮生效，需配合自定义类 */
.left-align-btn .mat-button-wrapper {
  justify-content: flex-start;
  width: 100%;
}

对应的HTML中给目标按钮添加自定义类：

<button mat-button class="left-align-btn">左对齐按钮文本</button>

方式二：全局样式（不推荐，易污染全局样式） #

在项目根目录的styles.css中添加样式：

.mat-button .mat-button-wrapper {
  justify-content: flex-start;
  width: 100%;
}

以上设置可让按钮内的文本完全左对齐，适配全宽或普通宽度的Angular Material按钮。

内容的提问来源于stack exchange，提问作者Ole