如何忽略影响primeng自动完成的materialize.css类？答案

【问题标题】：How to ignore materialize.css classes that are impacting primeng autocomplete?如何忽略影响primeng自动完成的materialize.css类？
【发布时间】：2018-02-21 05:25:33
【问题描述】：

我正在使用 primeng 自动完成 (https://www.primefaces.org/primeng/#/autocomplete)、bootstrap 4 和 materializecss (http://materializecss.com/getting-started.html)。我看到唯一真正弄乱页面的 CSS 是自动完成表单框。

如何阻止 materialize.css 弄乱自动完成组件的样式？

<form>
    <p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true">
        <ng-template let-value pTemplate="selectedItem">
            <span style="font-size:18px">>{{value}}<</span>
        </ng-template>
    </p-autoComplete>
</form>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 materialize primeng

【解决方案1】：

只需将 browser-default 类添加到 p-autoComplete 元素，以便在这种情况下忽略 Materialize CSS：

    <p-autoComplete inputStyleClass="browser-default" [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true">
        <ng-template let-value pTemplate="selectedItem">
            <span style="font-size:18px">>{{value}}<</span>
        </ng-template>
    </p-autoComplete>

查看工作Plunker

【讨论】：