如何在不使用的情况下重写primefaces组件内联样式！在css中很重要

how to override primefaces component inline style without using !important in css?

本文关键字：样式 css primefaces 重写 情况下 组件      更新时间：2023-09-26

我在一个网页上使用素数面组件p:selectonemenu。我试图使用我自己的css（不使用!important）在上面应用样式，但它没有从我自己的外部css文件中获取样式。它从某个地方获得了一些内联样式，但我不希望那个组件具有那种内联样式。我希望它使用我自己的外部css文件中的样式。

我不明白这种内联样式的来龙去脉。这是来自任何javascript吗？我需要帮助，下面是我的代码。

Primefaces代码

<p:selectOneMenu value="#{Controller.property}" id="dropDown">
  <f:selectItem itemLabel="Select One" itemValue="0" />
  <f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>

HTML解释代码

<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
ui-corner-all ui-helper-clearfix" style="width: 190px;">

这是来自任何javascript吗

这是正确的。此内联样式由PrimeFaces.widget.SelectOneMenu.initWidths在primefaces.js中设置。

在没有!important的情况下覆盖此项的唯一方法是自己指定内联样式。

<p:selectOneMenu ... style="width: 500px">

您也可以使用自定义JS文件覆盖PrimeFaces.widget.SelectOneMenu.initWidths，但这会影响所有<p:selectOneMenu>组件。

内联样式具有最大的"特异性"，它们覆盖了所有适用的规则，因此您唯一的补救措施是!important（除非您可以以某种方式覆盖style属性值）。

编辑：很抱歉忽略了核心问题。所以，你的食谱如下：

插入

 <script>
   debugger;
 </script>

在<body>的末尾，打开DevTools并加载页面。

现在，在DevTools调试器中，切换到Elements面板，找到接收内联样式的元素。它还不应该拥有它。

在该元素上单击鼠标右键，然后在上下文菜单中选择"Break on...|Attribute modifications"。现在，当style属性值发生更改时，您应该在相应的JavaScript行中断。祝你好运

相关文章：