Materialize css中断输入字段的绘制。如何修复此css？

我有以下代码：

<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>

这应该是好的，但问题是我想在物化ECS中使用priming。是否有一种方法可以使输入框不使用materializecss的样式，并保留Priming已有的功能？此时，搜索框看起来乱七八糟，放大镜位于输入字段上方，而不是内联

应该是这样的：

---

如果MaterializeCss覆盖了Priming使用的同一个类，您可以按照不同的顺序加载它们，首先是MaterializeCss，然后是Priming css。这将确保启动css将覆盖Materialize定义的相同类

找出哪个类可以实现覆盖的Materialize，并尝试解决这个问题

编辑

我认为这个plnkr为你的问题提供了一个例子

以下是您可以修复它的方法

当我打开developer tools并选择要检查的输入框时， 它告诉我materialize.css有一个类，如下所示

正如您在这里看到的，这个css类具有最高的优先级并覆盖了Priming类。此外，它还提供了一个提示，即

：not（.browser default）

伪类。 因此，如果您将您的输入设置为

浏览器默认值

类，则此规则将不适用

检查这个plnkr

我所做的只是将浏览器默认类添加到输入中

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

我确实有那个加载顺序，但看起来还是坏了。。。在chrome inspector中，如果我“取消”某些materialize css样式，那么事情看起来会更好，尽管我不知道如何覆盖Priming组件的这一点。这是plnkr问题的一个例子吗？是的，plnkr的例子说明了问题所在。我做了。。。虽然看起来问题仍然存在。。。不知道发生了什么事。当我把它插进去的时候，它看起来并没有改变什么。。。我不确定是否有什么东西覆盖了它。结果是版本不匹配，在更新版本后，它的工作方式与plunkr类似。向上投票。

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