Primeng angular 7 - css 未被应用

Question

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

           "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 没有变化。

Answer 1

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

见下图

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

这里是 angular.json 文件

Answer 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';

Answer 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"
        ],

Primeng angular 7 - css 未被应用

Primeng angular 7 - css is not getting applied

css

input

primeng

angular