Materialise css 破坏输入字段的 primeng 渲染。我该如何解决这个 css？

Question

我有以下代码：

<div class="container" style="width:100%;">
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>

<p-dataTable [value]="cars" [globalFilter]="gb">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

</div>

我的组件有：

  cars = [{
    'vin': 'von',
    'year': '1990',
    'brand': 'Audi',
    'color': 'blue'
  },{
    'vin': 'another',
    'year': '2050',
    'brand': 'Honda',
    'color': 'silver'
  }
  ]

这应该没问题，但问题是我想将 primeng 与 materializecss 一起使用。有没有一种方法可以使输入框不使用 materializecss 的样式并保留 primeng 已有的样式？此时，搜索框看起来乱七八糟，放大镜在输入字段上方而不是内联。

它应该看起来像这样：

https://www.primefaces.org/primeng/#/datatable/filter

Answer 1

如果 materalizecss 覆盖了 primeng 使用的 class，您可以按不同的顺序加载它们，首先是 materalizecss，然后是 primeng css。这将确保 primeng css 将覆盖相同的 classes materalize 定义。

找出哪些 class 物质化覆盖并尝试解决它。

编辑

我认为这个 plnkr 提供了您的问题的示例

http://plnkr.co/edit/6ptJJw8z9fOgHAAfSv4u?p=preview

这是解决问题的方法

当我打开开发者工具和select我想检查的输入框时，它告诉我 materalize.css 有一个 class 如下

正如您在此处看到的，此 css class 具有最高优先级并覆盖 primeng class。此外，它还给出了 :not(.browser-default) 伪 class 的提示。因此，如果您输入 browser-default class，则此规则将不适用。

检查这个plnkr

http://plnkr.co/edit/hTa2yxNZJP2Z8p91tQ9t?p=preview

我所做的就是将浏览器默认 class 添加到输入

<input #gb type="text" class="browser-default" pInputText size="50" placeholder="Global Filter">

Materialise css 破坏输入字段的 primeng 渲染。我该如何解决这个 css？

Materilaize css breaking primeng rendering of input field. How do I fix this css?

css

materialize

primeng

primeng-datatable