html 仅需在Angular 9中的分页器内为mat-select-option的div添加类或样式

zfciruhq 于 2022-12-09 发布在 Angular

关注(0)|答案(3)|浏览(145)

bounty将在5天后过期。回答此问题可获得+150的声望奖励。IonicMan希望吸引更多人关注此问题：如何在不影响其他mat-option的情况下只对mat-paginator mat-option进行样式设置？请不要使用ViewEncapsulation。无

任何人都可以帮助我找到一个解决方案，为以下图像，我已经附上？
即mat-paginator内的mat-select-option的container的div应该需要用于该div的附加类或样式。

<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>

<div>
<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample2">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>
</div>

<table >

<!--Here is the following mat-paginator's [pageSize]="[10, 15, 20]" that generates the mat-select with the options 10, 15, 20 -->

<mat-paginator [length]="totalRecords" [pageSize]="[10, 15, 20]" [pageSizeOptions]="1.pageSizeOptions"
    showFirstLastButtons></mat-paginator>

</table>

</main-componont>

Html

来源：https://stackoverflow.com/questions/61883819/need-to-add-a-class-or-a-style-for-the-mat-select-option-s-div-only-inside-the-p

3条答案

按热度按时间

lyr7nygr1#

为分页器创建组件，使用overlayPanelClass添加viewProviders

@Component({
    selector: "app-paginator",
    templateUrl: "./paginator.component.html",
    viewProviders: [
        {
            provide: MAT_SELECT_CONFIG,
            useValue: {
                overlayPanelClass: "paginator-panel-class"
            } as MatSelectConfig
        }
    ]
})

在css文件中使用此选项，您可以访问mat-option

.paginator-panel-class mat-option {
    color: red !important;
}

赞(0）回复(0）举报 2022-12-09

zwghvu4y2#

您可以在下面www.example.com尝试code.you一下需要使用ng-deep。

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}

赞(0）回复(0）举报 2022-12-09

zfycwa2u3#

你可以只使用一个简单的CSS类，你必须添加到每个元素或改变元素的根类，并有它的变化无处不在...我不知道你到底是什么目标，但这里是我的意思。
这将更改添加到主style.css文件后的所有材质选项

.mat-option{
  color: red !important;
}

这将只更改具有该类的元素，该类可以添加到组件的CSS文件或主style.css文件中...

.sample-class {
    color: red !important;
}

赞(0）回复(0）举报 2022-12-09

我来回答

html 仅需在Angular 9中的分页器内为mat-select-option的div添加类或样式

3条答案

相关问题

热门标签

最新问答