Primeflex 3与Angular 12搭配使用时样式无法正常渲染如何解决？

我的浏览器实际显示效果

Primeflex官方文档示例效果

我已经基于新技术栈完成环境搭建，使用的版本为Angular 12和Primeflex 3，测试代码如下：

<div class="card">
    <h5>Vertical and Grid</h5>
    <div class="formgrid grid">
        <div class="field col">
            <label for="firstname2">Firstname</label>
            <input id="firstname2" type="text" class="inputfield w-full">
        </div>
        <div class="field col">
            <label for="lastname2">Lastname</label>
            <input id="lastname2" type="text" class="inputfield w-full">
        </div>
    </div>
</div>

我完全按照官方文档编写上述代码，但实际渲染效果和官方示例不一致，样式未正确生效，请问有没有人遇到过相同的问题？该如何排查解决？

• 检查Primeflex全局引入配置
  打开angular.json文件，确认build配置下的styles数组已经正确引入primeflex的css文件，配置示例如下：

  "styles": [
    "node_modules/primeflex/primeflex.css",
    "src/styles.scss"
  ]
  

  Primeflex 3已将网格、工具类等样式全部合并到核心css中，不需要额外引入其他拆分样式文件，也不要错引入Primeflex 2的旧版本样式文件。
• 确认缺失的表单样式依赖
  你代码中用到的formgrid、field属于PrimeNG的表单配套样式，并非Primeflex自带类。如果你的项目仅安装了Primeflex没有安装PrimeNG，这些类没有对应样式会直接导致排版错乱。如果不需要引入全量PrimeNG，可以手动补充对应基础样式：

  .field {
    margin-bottom: 1rem;
  }
  .formgrid.grid {
    gap: 1rem;
  }
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  .inputfield.w-full {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-sizing: border-box;
  }
  

• 排查全局样式覆盖问题
  打开浏览器开发者工具，选中.grid、.col元素，查看样式面板中Primeflex提供的display: grid、grid-template-columns: repeat(auto-fit, minmax(0, 1fr))、flex: 1 1 0%等属性是否被其他全局样式覆盖。如果被覆盖，调整angular.json中styles数组的顺序，将Primeflex的样式放在最顶部即可。
• 检查视图封装配置
  如果当前组件手动修改了视图封装模式为ViewEncapsulation.ShadowDom，全局引入的Primeflex样式无法作用于Shadow DOM内部，需要将Primeflex样式单独引入到组件的styles数组中才能生效。

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