Question

我最近切换到一个自定义的Material主题，但是我注意到，除了我组件中的按钮之外，所有内容都正确的主题。

该按钮可以正常工作，组件中的其他元素也一样。添加color="primary"会更改文本的颜色，仅此而已。由于mat-toggle可以按预期工作，因此我认为它与缺少导入无关（MatButtonModule已导入）

下面是我的按钮和html文件最重要的代码的图片：

html

<h3>Recent Quiz Participants ({{participants.length}})</h3>
<div class="wrapper">
  <div class="filterbar">
    <mat-icon>search</mat-icon>
    <div class="form-wrapper">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
    </div>
  </div>
  <div>
    <mat-form-field>
      <mat-label>Displayed Columns</mat-label>
      <mat-select (selectionChange)="changeColumns($event)" [formControl]="columns" multiple>
        <mat-select-trigger>
          {{columns.value ? columns.value[0] : ''}}
          <span *ngIf="columns.value?.length > 1" class="additional-selection">
            (+{{columns.value.length - 1}} {{columns.value?.length === 2 ? 'other' : 'others'}})
          </span>
        </mat-select-trigger>
        <mat-option *ngFor="let column of selectedColumns" [value]="column">{{column}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div>
    <button mat-button [matMenuTriggerFor]="menu">Download</button>
    <mat-menu #menu="matMenu">
      <mat-slide-toggle (change)="completedOnly = !completedOnly" (click)="$event.stopPropagation()">Completed only
      </mat-slide-toggle>
      <button (click)="onClickCsv()" mat-menu-item>CSV</button>
      <button (click)="onClickJson()" mat-menu-item>JSON</button>
      <button (click)="onClickXlsx()" mat-menu-item>XLSX</button>
    </mat-menu>
  </div>
</div>

CSS

@import'https://fonts.googleapis.com/icon?family=Material+Icons';

.additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wrapper-nocontent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.filterbar {
  display: flex;
  align-items: center;
  width: 50%;
}


.form-wrapper,
mat-form-field,
body,
html {
  width: 100%;
}

mat-table {
  margin: 5px;
  width: 100%
}

p {
  font-weight: bold;
  font-size: 150%;
}

.spinner-card {
  display: flex;
  justify-content: center;
  align-items: center
}

mat-row, mat-header-row, mat-footer-row {
  padding-left: 24px;
  padding-right: 24px;
}

mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
  padding-left: 0;
}

mat-cell:last-child, mat-footer-cell:last-child, mat-header-cell:last-child {
  padding-right: 0;
}

mat-slide-toggle{
  margin-left: 15px;
  margin-right: 15px;
}

主题

@import '~@angular/material/theming';

@include mat-core();

$custom-theme-primary: mat-palette($mat-orange, 700);
$custom-theme-accent: mat-palette($mat-deep-orange);
$custom-theme-warn: mat-palette($mat-red, 50);

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);

Answer 1

mat-button和mat-menu-item是两件事。这是修改后的材料示例：

https://stackblitz.com/edit/angular-9kpiri

请注意，在第一个元素上，我正在尝试执行您描述的内容。但是，第三个元素只是使用mat-button，并且正在监听color属性。

Answer 2

结果是我误解了按钮。要获得按钮的背景色，您需要使用垫平按钮或垫高按钮。

Answer 3

对于切换按钮，您需要导入“从'@ angular / material / button-toggle'导入{MatButtonToggleModule};“；之后，您可以使用它的其他属性。有关更多参考，请单击以下链接： https://material.angular.io/components/button-toggle/api

您已使用slidetoggle，因此需要导入“从'@ angular / material / slide-toggle'导入{MatSlideToggleModule};“而不是我上面提到的。

角度材质按钮样式仅适用于app.component

3 个答案: