PrimeNG Angular Table样式修改求助：字体、按钮及模态框调整

问题描述 #

需要对PrimeNG Angular表格实现以下修改：

• 修改字体大小
• 修改按钮的颜色和尺寸
• 修改模态框的尺寸
  目前使用:host ::ng-deep设置样式但未生效，附上当前SCSS和HTML代码：

当前SCSS代码 #

.card {
    margin: 15px;
    border: #e4e4e4 1px solid;
    padding: 15px;
}

/* 表头行样式 */
:host ::ng-deep .p-datatable-thead>tr {
    border-top: #e4e4e4 1px solid;
}

/* 表体行样式 */
:host ::ng-deep .p-datatable-tbody>tr {
    border-top: #e4e4e4 1px solid;
    border-bottom: #e4e4e4 1px solid;
}

/* 表体行hover效果 */
:host ::ng-deep .p-datatable-tbody>tr:hover {
    background-color: #e4e4e4;
}

::ng-deep .p-column-filter-menu {
    font-size: 12px !important;
}

当前HTML代码 #

<div class="card">
    <p-table [value]="dados" styleClass="p-datatable-gridlines p-datatable-striped" dataKey="id" [rows]="3"
        [showCurrentPageReport]="true" [paginator]="true"
        currentPageReportTemplate="Mostrando {first} de {last} de {totalRecords} registros">
        <ng-template pTemplate="header">
            <tr>
                <th style="min-width:15rem" pSortableColumn="id">
                    <div class="flex align-items-center">
                        Id <p-sortIcon field="id" />
                        <p-columnFilter type="numeric" field="id" display="menu"></p-columnFilter>
                    </div>
                </th>
                <th style="min-width:15rem" pSortableColumn="email">
                    <div class="flex align-items-center">
                        E-mail <p-sortIcon field="email" />
                        <p-columnFilter type="text" field="email" display="menu"></p-columnFilter>
                    </div>
                </th>
                <th style="min-width:15rem" pSortableColumn="ehAdmin">
                    <div class="flex align-items-center">
                        Admin? <p-sortIcon field="ehAdmin" />
                        <p-columnFilter type="text" field="ehAdmin" display="menu"></p-columnFilter>
                    </div>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-dados>
            <tr>
                <td>{{dados.id}}</td>
                <td>{{dados.email}}</td>
                <td><p-tag [value]="dados.ehAdmin ? 'Sim' : 'Não'" [severity]="tipoBadge(dados.ehAdmin)"></p-tag></td>
            </tr>
        </ng-template>
    </p-table>
</div>

解决方案 #

以下是针对三个需求的具体样式修改，继续使用:host ::ng-deep确保样式穿透到PrimeNG组件内部，同时提升样式优先级覆盖默认值：

1. 修改表格整体字体大小 #

覆盖表头、表体、分页器、筛选菜单等所有文本区域：

/* 表头字体 */
:host ::ng-deep .p-datatable-thead th {
    font-size: 14px; /* 自定义大小 */
}

/* 表体字体 */
:host ::ng-deep .p-datatable-tbody td {
    font-size: 13px; /* 自定义大小 */
}

/* 分页器文本及按钮字体 */
:host ::ng-deep .p-paginator {
    font-size: 13px;
}

/* 筛选菜单内所有元素字体 */
:host ::ng-deep .p-column-filter-menu,
:host ::ng-deep .p-column-filter-menu .p-inputtext,
:host ::ng-deep .p-column-filter-menu .p-dropdown {
    font-size: 12px !important;
}

2. 修改按钮颜色和尺寸 #

针对表格内的分页按钮、筛选按钮、排序图标等元素调整样式：

/* 分页按钮基础样式 */
:host ::ng-deep .p-paginator .p-paginator-page,
:host ::ng-deep .p-paginator .p-paginator-prev,
:host ::ng-deep .p-paginator .p-paginator-next {
    background-color: #2196F3; /* 自定义背景色 */
    color: #fff; /* 文字颜色 */
    width: 32px; /* 自定义宽度 */
    height: 32px; /* 自定义高度 */
    font-size: 14px;
}

/* 分页按钮hover状态 */
:host ::ng-deep .p-paginator .p-paginator-page:hover,
:host ::ng-deep .p-paginator .p-paginator-prev:hover,
:host ::ng-deep .p-paginator .p-paginator-next:hover {
    background-color: #1976D2; /* hover背景色 */
}

/* 筛选按钮图标样式 */
:host ::ng-deep .p-column-filter-button {
    color: #2196F3; /* 图标颜色 */
    font-size: 16px; /* 图标大小 */
}

/* 排序图标颜色 */
:host ::ng-deep .p-sort-icon {
    color: #666; /* 自定义颜色 */
}

3. 修改筛选模态框尺寸 #

针对PrimeNG筛选菜单的弹窗组件设置尺寸：

/* 筛选模态框整体宽度 */
:host ::ng-deep .p-column-filter-dialog {
    width: 500px !important; /* 自定义宽度 */
    max-width: 90vw; /* 适配小屏幕 */
}

/* 模态框内容区域内边距调整（可选） */
:host ::ng-deep .p-column-filter-dialog .p-dialog-content {
    padding: 20px;
}

内容的提问来源于stack exchange，提问作者fabiobragato1