css - 如何从 Angular mat-grid-list 禁用 flex

Question

html

<mat-tab-group mat-stretch-tabs>
    <mat-tab label="New Registration" > 

        <ul *ngFor="let item of fakedata; index as i; ">           
                    <mat-card style="border-radius: 10px; margin-left: 5%; margin-top: 1%; margin-right: 5%;">
                        <mat-grid-list cols="3">
                            <mat-grid-tile>
                               <p>sometext</p><br>
                               <p>sometext</p><br>
                               <p>sometext</p><br>
                               <p>sometext</p>
                        </mat-grid-tile>
                        <mat-grid-tile>2</mat-grid-tile>
                        <mat-grid-tile>3</mat-grid-tile>
                    </mat-grid-list>
                    </mat-card>     
        </ul>
    </mat-tab>
    <mat-tab label="  other content">  other content </mat-tab>
    <mat-tab label=" other content"> yet other content</mat-tab>
  </mat-tab-group>

使用这个 CSS

.mat-grid-tile .mat-figure {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block !important ;
    align-items: flex-start; 
    justify-content: flex-start;
    height: 100%;
    padding: 0;
    margin: 0;
}

也尝试从这里回答类似的问题
我在上面用 Viewencapsulation ON/OFF 尝试过的 css
也尝试过清除浏览器缓存
当我禁用 flex 属性时它显示正确的输出 我做错了什么？
Angular-9 浏览器 - Chrome

谢谢

标签： cssangularangular-material

Answer 1

在 /layout-grid.component.css 添加：

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
  display: block !important; /* or whichever you need */
}

这将覆盖角度材料 css 中的那个。