我一直在努力根据一个条件更改对话框的背景 colored颜色 .

Stackblitz

ChangeColor是我正在判断是否为真的变量.用于更改其他标签的背景色.假设对话框可能需要某种进一步的覆盖.我所想要的就是在它上面覆盖一些东西,沿着这条线改变 colored颜色 .

我try 了内联的、全局的CSS样式.即使在带有样式的div中包装对话框内容也有奇怪的行为.

Updated Code:

Stackblitz Solution

推荐答案

如果要更改对话框内容的 colored颜色 ,则需要使用styleClass来设置对话框上的类,然后使用.p-dialog-title.p-dialog-content.p-dialog-footer设置内部元素的样式.

下面是代码应该是什么样子.

<!-- template -->
<p-dialog
  header="Long Content"
....
  [styleClass]="changeColor ? 'lightgray' : ''"
>

:host ::ng-deep .lightgray .p-dialog-header {
  background-color: lightgray;
}
:host ::ng-deep .lightgray .p-dialog-content {
  background-color: lightgray;
}
:host ::ng-deep .lightgray .p-dialog-footer {
  background-color: lightgray;
}

Link to stackblitz

相反,如果你想在对话框后面有一个遮罩层,你可以在对话框上设置[modal]="true",让它在对话框后面显示一个透明层.

Css相关问答推荐

要创建其按钮垂直对齐而不是水平对齐的v-bTN-toggle

无限交替css动画之间的未知延迟

不了解重复-线性-渐变 colored颜色 停止

如何解决 Spotify 嵌入代码中的白色背景错误?

CSS 中的 :not(style) ~ :not(style) 是什么?

使用 flexbox 使图像与内容高度相同

:is() 伪类是否支持相邻sibling 表达式中第二个元素的组合器?

如何使 css 不重复同一个类?

为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

在 vuetify 中跨 `default.vue` 和 `index.vue` 维护网格系统

如何强制 div 出现在下方而不是旁边?

如何从 表格单元格中创建链接

CSS3 变换:旋转;在 IE9 中

仅针对直接子代而不是其他相同后代的 CSS Select 器

属性nowrap被认为是过时的.建议使用较新的构造.它是什么?

纯 CSS 复选框图像替换

如何在渲染之前获取react 组件的大小(高度/宽度)?

从 css 添加标题属性

如何在页面上居中 twitter bootstrap 选项卡?