как установить ширину углового материала, развернуть панель под сетку

Question

Я хотел бы использовать компонент GridList для создания двухколоночного макета. Внутри я разместил ExpandPanels, но они сосредоточены в плитке. Мне нужно, чтобы они соответствовали горизонтальному пространству. Конечно, я мог бы поместить атрибут класса в компонент и установить ширину, но я не уверен, что это лучший «материальный» способ сделать это. Вот мой тестовый пример:

<mat-grid-list cols="2" ratio="2:1">
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true' >
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE
        </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-form-field>
         <input matInput placeholder="TEST">
       </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true'>
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE2
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="TEST">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
</mat-grid-list>

Я довольно новичок в угловой и материальной. Буду рад некоторым предложениям.

Answer 1

Вы можете просто нацелить тег mat в свой css-файл, я не уверен, что панель расширения mat содержит предварительно определенный атрибут для его обработки. Просто добавьте

 mat-expansion-panel {
    width: 100%;
  }