Angular Стиль кнопки материала применяется только в app.component

Question

Я недавно переключился на пользовательскую тему «Материал», но до меня дошло, что все получает правильную тему, кроме кнопок в моих компонентах.

Кнопка работает без проблем, как и другие элементы в моем компоненте. Добавление color="primary" меняет цвет текста, но это все, что он делает. Поскольку тумблер работает как положено, я не думаю, что он имеет какое-либо отношение к отсутствующим импортам (импортирован 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

Оказывается, я неправильно истолковал мат-кнопку. Чтобы получить цвет фона для кнопки, вам нужна кнопка с плоской матовой кнопкой или кнопка с поднятой матовой поверхностью.

Answer 2

для кнопки Toggle вам нужно импортировать "import {MatButtonToggleModule} из '@ angular / material / button-toggle';" После этого вы можете использовать его дополнительные свойства. для получения дополнительной ссылки нажмите на следующую ссылку: https://material.angular.io/components/button-toggle/api

вы использовали слайд-тумблер, для которого вам необходимо импортировать "import {MatSlideToggleModule} из '@ angular / material / slide-toggle' ;» вместо вышеупомянутого я упомянул.

Answer 3

mat-button и mat-menu-item - это две разные вещи. Вот модифицированный пример материалов:

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

Обратите внимание, что на первом элементе я пытаюсь сделать то, что вы описываете. Третий элемент, однако, просто использует mat-button и прослушивает свойство color.