Angular Material中MatGridListModule失效，mat-grid-tile文本不显示求助

我明白你遇到的困扰——已经正确导入了MatToolbarModule和MatGridListModule，控制台也没有报错，但工具栏里的网格内容就是看不到。这大概率是样式冲突或布局高度适配问题导致的，下面我一步步帮你解决：

问题根源 #

MatToolbar本身是一个高度固定的组件（默认高度64px），而MatGridList自带默认的内边距、行高样式，当把它嵌套在Toolbar里时，这些样式叠加后可能导致网格内容被挤出可视区域，或者被Toolbar默认的overflow:hidden属性遮挡住了。

解决方案一：调整Grid样式适配Toolbar #

你可以给mat-grid-list和mat-grid-tile添加自定义样式，强制它们适配Toolbar的高度：

<mat-toolbar color="primary">
  <mat-grid-list cols="3" style="height: 100%; width: 100%;">
    <mat-grid-tile style="padding: 0;">left</mat-grid-tile>
    <mat-grid-tile style="padding: 0;">center</mat-grid-tile>
    <mat-grid-tile style="padding: 0;">right</mat-grid-tile>
  </mat-grid-list>
</mat-toolbar>

如果想要更优雅的样式管理，可以在组件的CSS文件中添加：

mat-toolbar mat-grid-list {
  height: 100% !important;
  width: 100% !important;
}

mat-toolbar mat-grid-tile {
  padding: 0 !important;
}

解决方案二：用Flex布局替代Grid（更推荐） #

其实MatToolbar本身天然支持Flex布局，用它来实现左中右的布局会更自然，完全不会有样式冲突的问题，代码也更简洁：

<mat-toolbar color="primary" style="display: flex; justify-content: space-between;">
  <span>left</span>
  <span>center</span>
  <span>right</span>
</mat-toolbar>

如果需要三个区域平分Toolbar宽度，可以调整Flex属性：

<mat-toolbar color="primary" style="display: flex; width: 100%;">
  <span style="flex: 1;">left</span>
  <span style="flex: 1; text-align: center;">center</span>
  <span style="flex: 1; text-align: right;">right</span>
</mat-toolbar>

这样每个区域会自动平分Toolbar的宽度，完美实现你想要的布局效果。

验证步骤 #

1. 替换代码后刷新页面，检查文本是否正常显示
2. 如果仍有问题，可以打开浏览器开发者工具（F12），查看mat-grid-list和mat-grid-tile的元素样式，确认是否存在高度为0、被隐藏或溢出的情况

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