Primeng angular 7 - css没有被应用答案

【问题标题】：Primeng angular 7 - css is not getting appliedPrimeng angular 7 - css没有被应用
【发布时间】：2019-10-08 04:17:03
【问题描述】：

我正在为 UI 组件使用 angular 7 和 primeng 库。 CSS 未应用于 HTML 元素。我已经在angular.json中导入了这些css文件：

           "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.scss"
            ]

在演示页面上：http://primefaces.org/primeng/#/inputgroup

输入框生成了这些类：ui-inputtext ui-corner-all ui-state-default ui-widget

我生成的 html 中缺少这些，如果我手动应用这些类，则应用 css。这是 HTML 代码：

<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon"><i class="pi pi-user" style="line-height: 1.25;"></i></span>
            <input type="text" pInputText placeholder="Username">         
        </div>
    </div>

    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon">$</span>
            <input type="text" pInputText placeholder="Price">   
            <span class="ui-inputgroup-addon">.00</span>      
        </div>
    </div>

    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon">www</span>
            <input type="text" pInputText placeholder="Website">      
        </div>
    </div>
</div>

我试过ViewEncapsulation:

import { ViewEncapsulation } from '@angular/core';

@Component({
  ..
  encapsulation: ViewEncapsulation.None
})

primeng 的app.module.ts 没有变化。

【问题讨论】：

标签： css angular input primeng

【解决方案1】：

根据我的示例，您需要在 app.module.ts 文件中进行更改

见下图

您需要从组件根模块中的primeng 导入InputTextModule

这里是 angular.json 文件

【讨论】：

这已经奏效了，我没有在文档中找到导入它。谢谢！

【解决方案2】：

如果你觉得这有帮助...

我遇到了同样的问题，然后我尝试将 css 文件放入我的 styles.css 而不是 angular.json 中，现在它可以正常工作了

改变这个...（angular.json）

"styles": [
          "src/styles.scss",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/saga-blue/theme.css",
          "node_modules/primeng/resources/primeng.min.css"
        ],

通过这个...（src/styles.scss）：

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
@import '~primeicons/primeicons.css';

【讨论】：

【解决方案3】：

安装primeng-lts时

将以下样式添加到 angular.json

  "styles": [
          "./node_modules/primeng-lts/resources/themes/nova-light/theme.css",
          "./node_modules/primeng-lts/resources/primeng.min.css",
          "node_modules/primeicons/primeicons.css"
        ],

【讨论】：