Question

我在尝试在PrimeNG对话框中应用样式时遇到了麻烦。

我有一个具有PrimeNG对话框的组件：

<p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">
...
</p-dialog>

我还有一个scss文件，其中包含组件的样式。对话框的背景颜色是透明的，但我想将其设置为白色。所以我试着在我的scss文件中以不同的方式应用该样式：

.ui-dialog {
    background-color: #fff;
}

将styleClass添加到对话框并尝试将样式应用于它：

<p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">

.dialog-filters {
    background-color: #fff;
}

它们都不起作用。有什么想法吗？

Answer 1

对于样式参数，您应该使用[]。因此，当您想要将内联样式应用于p对话框时，例如<p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>。

我必须承认，当primeng需要[]，没有或[（）]时，我非常困惑，至少在查看他们不经常更新的网站时。所以你最好只看一下github上的源代码。

Answer 2

使用以下CSS方法

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background: tomato; 
}

Answer 3

您可以使用class lexerBasicTestCases(unittest.TestCase): def Test1(self): """ Docstrings are printed in most test runners. """ test = "9+4" expect = ["9", "+", "4"] failure_msg = 'lexer({0}) should return {1} but returned {2}' actual = lexer(test) self.assertListEqual(expect, actual, failure_msg.format(test, expect, actual))的{{1}}属性，如下所示

 @Override
                            public void onCompleted(Exception e, Bitmap result) {
                                if (e != null) {
                                    Toast.makeText(MainActivity.this, "Error downloading file", Toast.LENGTH_LONG).show();

                                    return;
                                }
                                 //IT WORKS
                                //ImageView imageView = (ImageView)findViewById(R.id.imageView2);
                                //imageView.setImageBitmap(result);


                               bitmaps.add(result);
gridData.setAdapter(new BitmapAdapter(MainActivity.this, bitmaps));
                                Toast.makeText(MainActivity.this, "File upload complete", Toast.LENGTH_LONG).show();

                            }
                        });

css文件中的样式将为

styleClass

或者，如果您使用的是p-dialog类，则应该在层次结构中使用它们，如下所示

<p-dialog header="Title" [(visible)]="display" modal="modal" width="300" styleClass="active" >
....

LIVE DEMO 包含两种方法

Answer 4

如果您要通过html修改现有的类。

 <p-confirmDialog
                header="Confirmation"
                appendTo="body"
                width="425"
                icon="pi pi-exclamation-triangle"
                >
<style type="text/css">
            .ui-widget-overlay.ui-dialog-mask {
               opacity: 0 !important;
            }
</style>

 </p-confirmDialog>

还要确保设置：封装值

@Component({
    encapsulation: ViewEncapsulation.None
})

在PrimeNG对话框中应用样式

4 个答案: