Angular Material按钮无内容显示问题求助

以下是具体排查方向和解决方案：

• 检查样式覆盖问题：打开浏览器开发者工具（F12），选中按钮元素查看computed样式，重点确认font-size、color、visibility、opacity属性，排查是否被全局样式或第三方样式设置为font-size: 0、color: transparent等导致文字隐藏。
• 验证按钮模板写法：确保按钮标签内正确写入内容，比如普通按钮：<button>按钮文本</button>，Angular Material按钮：<button mat-button>Material按钮文本</button>，避免空标签或内容被错误注释。
• 排查容器布局问题：检查按钮所在父元素是否设置display: none、overflow: hidden等属性，导致按钮或其内容被移出可视区域。
• 确认Material样式引入：检查angular.json的styles数组中是否包含Angular Material主题样式，比如@angular/material/prebuilt-themes/indigo-pink.css，缺失主题会导致按钮样式异常。
• 检查条件渲染指令：查看按钮元素是否带有*ngIf、[hidden]等指令，确认指令逻辑是否误触发导致按钮内容未渲染。

注：右侧气泡为按钮，旁边文本是按钮外的p标签

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