PrimeNg ConfirmDialog样式错乱、CSS未生效，是否需引入样式文件？

没错，你碰到的这个问题确实是因为没引入PrimeNG组件必需的CSS文件，这是用PrimeNG时特别常见的小疏漏，我给你理清楚解决的步骤：

核心原因：缺少PrimeNG基础样式与主题样式 #

PrimeNG的所有组件都依赖它自带的基础样式库和主题样式文件，没引入的话组件就只会渲染结构，没有样式效果。

1. 引入基础样式和主题样式 #

你需要在项目的全局样式文件（比如styles.css/styles.scss）里添加这两行：

/* PrimeNG基础样式 */
@import "primeng/resources/primeng.min.css";
/* 主题样式，这里用默认的lara-light-blue，你可以换成其他主题 */
@import "primeng/resources/themes/lara-light-blue/theme.css";

如果是用Angular CLI的项目，也可以直接在angular.json的styles数组里配置路径，这样构建时会自动加载：

"styles": [
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
  "src/styles.css"
]

2. 补充Font Awesome样式（因为你用到了fa图标） #

你的代码里用了fa fa-question-circle图标，所以还得确保Font Awesome的样式也引入了，同样在全局样式文件里加：

@import "font-awesome/css/font-awesome.min.css";

要是还没装Font Awesome，先通过npm安装：npm install font-awesome --save

额外排查点（如果还是有问题） #

• 检查PrimeNG版本：确保你装的是最新稳定版，版本不兼容可能导致样式异常，执行npm update primeng更新试试
• 检查自定义样式冲突：用浏览器开发者工具看看是不是自己写的CSS覆盖了PrimeNG的默认样式，调整样式优先级就行
• 确认appendTo="body"的影响：这个属性是用来解决弹窗被其他元素遮挡的，一般不会导致样式失效，但如果你的页面有特殊的样式隔离设置，可以暂时去掉试试

做完这些配置后，你的ConfirmDialog应该就能正常显示样式，不会再错乱啦。

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