Как стилизовать Specifi c Выбор материала - PullRequest
Новая
       26

Как стилизовать Specifi c Выбор материала

0 голосов
/ 06 мая 2020

Я работаю в проекте Angular 9, используя Материал.

У меня есть страница, на которой есть выборки некоторых материалов, и пагинатор материалов (который использует раскрывающийся список для изменения элементов на странице) . Я хочу изменить стиль параметров матов в выборе матов для разбиения на страницы, но я не хочу, чтобы это влияло на другие варианты выбора матов на странице.

Использование этого редактирует все выделенные маты на странице page. 

::ng-deep mat-option:last-child:before {
  content: "All";
  float: left;
  text-transform: none;
  top: 4px;
  position: relative;
}
::ng-deep mat-option:last-child .mat-option-text {
  display: none;
  position: relative;
}

Но мне нужно указать только для изменения параметров выбора страницы. Я пробовал добавить класс в mat-paginator, но это не сработало. 

<mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]"
      [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
    </mat-paginator>

Я также быстро сделал https://stackblitz.com/edit/style-specific-mat-select

Есть ли способ указать, какой коврик я использую?

1 Ответ

0 голосов
/ 09 мая 2020

ng-deep устарел, поэтому вы должны использовать компонент без инкапсуляции, поэтому: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

Созданные вами классы css должны инкапсулировать его в div с другим классом и определять их таким образом :

css 

.custom-style-paginator-select {
  mat-option:last-child:before {
    content: "All";
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
  }
  mat-option:last-child .mat-option-text {
    display: none;
    position: relative;
  }
}

html

<div class="custom-style-paginator-select">
  <mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]" [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
  </mat-paginator>
</div>

Для получения дополнительной информации см .:

https://angular.io/guide/component-styles#view -инкапсуляция

https://material.angular.io/guide/customizing-component-styles

https://material.angular.io/guide/theming#defining -a-custom-theme

...