PrimeFlex 在 Angular 版本 13 上无法正常工作

Question

我正在使用 "@angular/cli": "~13.3.0", "primeflex": "^3.1.3",

我已经完成安装

npm install primeflex --save

然后添加到 angular.json 文件

      "node_modules/primeflex/primeflex.css"

我的Html如下：

<div class="card">
<div class="card-container yellow-container overflow-hidden">
<div class="flex">
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex">
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>

div 正确对齐，但没有颜色和样式，如下所示：

enter image description here

知道会出现什么问题吗？

Answer 1

您的代码可以正常运行，但缺少主题，这就是为什么您可以看到间距但看不到颜色的原因

我卡了一会儿，然后在docs that it does not come with colors, so you need to add a theme, after adding one you can see the colors here https://stackblitz.com/edit/angular-ivy-gtnzrg?file=src%2Fstyles.css

上阅读

不过 index.css 添加我的

PrimeFlex 在 Angular 版本 13 上无法正常工作

PrimeFlex not working properly on Angular version 13

angular

angular13

primeflex