Angular Material v18.1列表添加matListItemTitle后布局异常求助

我需要创建一个包含强调内容和多个按钮的Angular Material v18.1列表，初始实现布局正常，但为名称元素添加matListItemTitle指令后，布局出现错乱。我可以手动编写样式修复，但希望遵循Angular Material列表指令的规范，想排查操作中的问题所在。

相关代码 #

HTML代码 #

<main>
  <mat-list>
    @for (c of contacts; track c) {
    <mat-list-item>
      <mat-icon matListItemIcon>folder</mat-icon>
      <div class="contact-details">
        <!-- 不加matListItemTitle时布局正常 -->
        <div matListItemTitle>{{c.name}}</div>
        <div>{{c.email}}</div>
        <div>{{c.description}}</div>
      </div>
      <button matListItemMeta mat-stroked-button color="primary">Compose</button>
      <button matListItemMeta mat-stroked-button color="warn">Remove</button>
    </mat-list-item>
    <mat-divider></mat-divider>
    }
  </mat-list>
</main>

CSS代码 #

:host {
  width: 100%;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 20px;
}

mat-list {
  width: 80%;
}

mat-list-item {
  display: flex;
  flex-direction: row;
}

.contact-details {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px 30px;
}

TypeScript代码 #

import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule, MatDividerModule, MatIconModule, MatListModule],
  templateUrl: './list.html',
  styleUrl: './list.css',
})
export class App {
  contacts = [
    { name: 'one', email: '1@one', description: 'The one.' },
    { name: 'two', email: '2@one', description: 'The two.' },
  ];
}

问题原因 #

Angular Material的matListItemTitle指令会为目标元素注入默认样式，其中包括将元素设置为块级元素（display: block），而你的.contact-details容器采用的是flex横向布局。块级元素会独占一行，直接破坏了flex容器的横向排列规则，导致布局错乱。

解决方案 #

方案1：遵循Material列表原生结构规范 #

Material列表的matListItemTitle和matListItemLine设计用于纵向组织内容，如果你不需要横向排列详情，可以直接使用原生结构：

<main>
  <mat-list>
    @for (c of contacts; track c) {
    <mat-list-item>
      <mat-icon matListItemIcon>folder</mat-icon>
      <div matListItemTitle>{{c.name}}</div>
      <div matListItemLine>{{c.email}}</div>
      <div matListItemLine>{{c.description}}</div>
      <button matListItemMeta mat-stroked-button color="primary">Compose</button>
      <button matListItemMeta mat-stroked-button color="warn">Remove</button>
    </mat-list-item>
    <mat-divider></mat-divider>
    }
  </mat-list>
</main>

方案2：保留自定义横向布局，覆盖默认样式 #

如果需要保持横向排列的详情区域，可以通过CSS覆盖matListItemTitle的默认块级样式，让它适配flex布局：

.contact-details [matListItemTitle] {
  display: flex;
  flex: 1; /* 可选：让标题占据对应比例空间 */
}

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