Angular PrimeNG：如何设置p-dialog关闭图标的样式？

你之前的代码没生效，是因为只选中了关闭按钮的容器，没直接选中内部的图标元素（PrimeNG用PrimeIcons渲染关闭图标，对应类是.pi-times）。试试下面的方案：

方案1：组件内样式（带宿主选择器，提高优先级） #

在组件的CSS文件中添加：

:host ::ng-deep .p-dialog .p-dialog-titlebar-close .pi-times {
    color: #fff;
    font-size: 16px;
}

:host 确保样式只作用于当前组件内的对话框，避免全局污染；::ng-deep 穿透组件样式隔离，直接作用到PrimeNG的内部元素。

方案2：全局样式（无需::ng-deep） #

如果希望所有对话框都生效，直接在项目根目录的styles.css/styles.scss中添加：

.p-dialog .p-dialog-titlebar-close .pi-times {
    color: #fff;
    font-size: 16px;
}

排查技巧 #

如果还是不生效，打开浏览器开发者工具（F12），选中关闭图标元素，查看当前生效的样式，确认是否有其他更高优先级的样式覆盖了你的设置。可以针对性地调整选择器的优先级，比如增加父元素类名，必要时再使用!important（优先用高优先级选择器，避免滥用!important）。

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