Angular material CSS未应用于“角度材质”对话框_Angular Material

Angular material CSS未应用于“角度材质”对话框

angular-material

Angular material CSS未应用于“角度材质”对话框,angular-material,Angular Material,我的angular应用程序中有一个对话框，该对话框不执行在应用程序其他部分工作的css命令。在我的主视图中，我有一个mat工具栏，定义如下（为简洁起见，不显示sidenav）： TRACS3 <div fxShow="true" fxHide.

我的angular应用程序中有一个对话框，该对话框不执行在应用程序其他部分工作的css命令。在我的主视图中，我有一个mat工具栏，定义如下（为简洁起见，不显示sidenav）：

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...

并尝试对其应用以下css：

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...

.dialog-toolbar {
  mat-toolbar {
    flex: 1 1 auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
    border: 1px solid red;
  }
}

.flex-spacer {
  flex: 1 1 auto;
}

下面是它的屏幕截图：

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...

出于某种原因，应用了红色边框，但我无法使标题栏为对话框宽度的100%。我试过100%，600px，flex。100%在主标题中效果很好，但在这里不是。任何内容都不会在“实时跟踪”字符串和“x”按钮之间插入任何空格以关闭对话框。“flex 1 1 auto”可以很好地将主标题中的按钮与“3.0”分开，但在对话框标题中不起作用。为什么？

：ng deep.mat对话框容器{

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...

在此处插入css

回答不仅是关于发布代码，而且是解释原因，以便其他人可以学习。请参见

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...