1

我有以下代码：

<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

4

1 回答 1

2

如果materalizecss覆盖primeng使用的同一个类，你可以以不同的顺序加载它们，首先materalizecss然后primeng css。这将确保primeng css 将覆盖相同的类materalize 定义。

找出哪个类物质化覆盖并尝试解决这个问题。

编辑

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

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

这是您可以解决的方法

当我打开开发者工具并选择我要检查的输入框时，它告诉我 materalize.css 有一个类如下

在此处输入图像描述

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

检查这个 plnkr

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

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

<input #gb type="text" class="browser-default" pInputText size="50" placeholder="Global Filter">
于 2017-06-21T08:01:35.983 回答