Angular中PrimeNG样式被自定义样式覆盖，angular.json配置顺序无误

问题分析 #

你当前angular.json的styles数组配置是先加载自定义styles.scss，再加载PrimeNG样式，但styles.scss里引入的_reset-and-normalize.scss通过全局选择器（如*）将margin、padding、border重置为0，导致PrimeNG组件的默认样式被覆盖。即便angular.json的顺序看似正确，全局重置的低权重选择器仍会影响未明确设置这些属性的PrimeNG组件，或是因样式合并逻辑导致预期优先级失效。

解决方案 #

方案1：统一在styles.scss中控制引入顺序（推荐） #

将PrimeNG等第三方样式从angular.json的styles数组中移除，改为在styles.scss的最后引入，确保第三方样式在自定义重置样式之后加载，从而覆盖全局重置属性：

修改styles.scss：

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Helper CSS */
@import 'assets/css/_common.scss';
@import 'assets/css/_typography.scss';
@import 'assets/css/_grid.scss';
@import 'assets/css/_pattern.scss';
@import 'assets/css/_variables.scss';
@import 'assets/css/_reset-and-normalize.scss';

/* 第三方组件样式：放在最后确保优先级 */
@import 'node_modules/primeng/resources/themes/lara-light-indigo/theme.css';
@import 'node_modules/primeng/resources/primeng.min.css';
@import 'node_modules/summernote/dist/summernote-lite.min.css';

同步修改angular.json的styles数组，仅保留自定义样式入口：

"styles": [
  "src/styles.scss"
],

方案2：限制重置样式的作用范围 #

如果不想调整引入顺序，可修改_reset-and-normalize.scss，让重置样式仅作用于你自己的组件，避免影响PrimeNG：

修改_reset-and-normalize.scss：

/* 仅对.app-root容器下的元素生效，不干扰第三方组件 */
.app-root * {
  margin: 0;
  padding: 0;
  border: 0;
  /* 其他重置属性 */
}

然后在根组件的最外层元素添加app-root类（如app.component.html）：

<div class="app-root">
  <!-- 你的应用内容 -->
</div>

方案3：调整angular.json中的样式顺序（备选） #

若坚持在angular.json中管理样式，需确认第三方样式的加载顺序确实在自定义样式之后。不过这种方式受Angular编译时的样式合并逻辑影响，优先级可能不如方案1稳定。如果当前顺序无效，可尝试清理缓存后重新构建项目。

原理说明 #

CSS优先级遵循“后来居上”原则，同时受选择器权重影响。全局重置的*选择器权重极低，只要后续加载的PrimeNG样式使用类选择器（如.p-button），就能覆盖重置属性。通过在styles.scss中按顺序引入所有样式，可明确控制加载顺序，确保优先级符合预期。

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