Question

我添加了PrimeNG确认对话框（遵循官方文档中的示例）：

component.html

<p-confirmDialog appendTo="body" #cd>
     <p-footer>
        <button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
        <button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
    </p-footer>
</p-confirmDialog>

component.ts：

import { ConfirmationService } from 'primeng/api';

@Component({
    selector: 'xxx',
    templateUrl: './xxx.component.html',
    styleUrls: ['./xxx.component.scss'],
    providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }

// I am trying to simplify the code
// this method is called successfully 
this._confirmationService.confirm({
   message: 'Please print or save the confirmation details before continuing.',
   header: 'Confirmation details',
   accept: () => {
        this.navigatetoPaymentApp();
   }
});

angular.json：

 "styles": [              
          "node_modules/primeng/resources/primeng.min.css",
          "src/styles/main.scss"
        ],

app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class AppModule { }

我明白了：

预期结果如下：

问题： 1.缺少来自primeng的开箱即用样式（例如，使背景变暗） 2.缺少关闭的窗口十字图标

有什么遗漏吗？想法？

谢谢！

Answer 1

最终我找到了问题。这是因为CSS样式来自主要主题。例如将"node_modules/primeng/resources/themes/nova-light/theme.css"添加到angular.json作为样式列表。

因此，我实现了具有特定属性的以下类：

.ui-confirmdialog.ui-dialog {
    width: 34em;
    background-color: white;

    & .ui-dialog-titlebar {
        padding: .5em 0.667em;
        font-family: xxx;
        font-size: 1.3125rem;
        font-weight: bold;
        color: orange;
    }

    & .ui-dialog-content {
        padding: 1em;
    }
}

此外，我需要添加它以使背景变暗（我从primeNG的theme.css文件中汲取了一些智慧：

body .ui-widget-overlay {
    background-color: #424242;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

注意：如果未应用主题，则类ui-widget-overlay几乎是空的。

PrimeNG确认对话框（OverLay）没有内置样式（css）

1 个答案: