无法正确显示材质按钮并使用 Angular 仅在选项卡名称上添加下划线

Question

我无法正确显示角度材质按钮，并且我需要以不同的方式显示角度选项卡。我在下面解释我的代码。

routes.component.html::

<div class="content-wrapper">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col panel--raised card-top bg-white">
            <div class="mdl-grid bottom-r-padding-0">
                <div class="mdl-cell mdl-cell mdl-cell--6-col mdl-layout-spacer">
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col">
                            <mat-tab-group>
                                <mat-tab label="Manage"> Manage</mat-tab>
                                <mat-tab label="Create">
                                    <form class="example-form">
                                        <table class="example-full-width" cellspacing="0">
                                            <tr>
                                                <mat-form-field appearance="legacy">
                                                    <mat-label>Dist</mat-label>
                                                    <input matInput placeholder="e.x-Londrina">
                                                </mat-form-field> 
                                            </tr>
                                            <tr>
                                                <mat-form-field appearance="standard">
                                                    <mat-label>Route</mat-label>
                                                    <input matInput placeholder="e.g.: CTA-LDA">
                                                </mat-form-field>
                                            </tr>
                                            <tr>
                                                <button mat-button color="success">Success</button>
                                            </tr>
                                        </table>
                                    </form>
                                </mat-tab>
                            </mat-tab-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

routes.component.css::

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }
  
  .example-full-width {
    width: 100%;
  }
  
  td {
    padding-right: 8px;
  }
  
  
  /* Success syling */
  
  .mat-button.mat-success,
  .mat-stroked-button.mat-success {
      color: #155724;
  }

上面的代码给出了以下输出。

这里的成功按钮与角材料按钮不正确。实际上我需要如下输出。

这里上图是我需要的输出。该页面应如上所示。此外，我只需要下划线应该在选项卡名称下。请帮我解决这个问题。

Answer 1

试试这个，

对于按钮，

 <button mat-raised-button color="primary">Primary</button>

对于占位符，

<mat-form-field appearance="fill" floatLabel="always">
      <mat-label>Both a label and a placeholder</mat-label>
      <input matInput placeholder="Simple placeholder">
    </mat-form-field>

使用下面的 css 来改变 Mat Tab 颜色，

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}

::ng-deep .mat-tab-list .mat-tab-labels {
color:blue;
background-color: rgb(255, 255, 255);
}