如何在不使用css中的！important的情况下覆盖primefaces组件内联样式？
[英]how to override primefaces component inline style without using !important in css?
问题描述
I am using primefaces component p:selectonemenu on one of my webpages. 
我在我的一个网页上使用primefaces组件p:selectonemenu 。 I'm trying to apply style on it using my own css (without using !important ), but it's not taking the styles from my own external css file. 我正在尝试使用我自己的css（不使用!important ）在其上应用样式，但它不是从我自己的外部css文件中获取样式。 It's taking some inline style from somewhere, but I don't want that component to have that inline style. 它从某个地方采用了一些内联样式，但我不希望该组件具有该内联样式。 I want it to use style from my own external css file. 我希望它使用我自己的外部css文件中的样式。
I am not getting from where this inline style is coming. 我没有从这种内联风格的来临。 Is this coming from any javascript? 这是来自任何JavaScript？ I need help here, below is my code. 我需要帮助，下面是我的代码。
Primefaces Code Primefaces代码
<p:selectOneMenu value="#{Controller.property}" id="dropDown">
<f:selectItem itemLabel="Select One" itemValue="0" />
<f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>
HTML interpreted code HTML解释代码
<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default
ui-corner-all ui-helper-clearfix" style="width: 190px;">
2 个解决方案
解决方案1
2 2013-02-28 12:10:50
Is this coming from any javascript?
That's correct. 那是对的。 This inline style is been set by PrimeFaces.widget.SelectOneMenu.initWidths in primefaces.js . 此内联样式由primefaces.js的PrimeFaces.widget.SelectOneMenu.initWidths设置。
The only way to override this without !important is to specify the inline style yourself. 没有!important的唯一方法就是自己指定内联样式。
<p:selectOneMenu ... style="width: 500px">
You could also override the PrimeFaces.widget.SelectOneMenu.initWidths with a custom JS file, but this would affect all <p:selectOneMenu> components. 您还可以使用自定义JS文件覆盖PrimeFaces.widget.SelectOneMenu.initWidths ，但这会影响所有<p:selectOneMenu>组件。
解决方案2
0 2013-02-21 08:13:06
Inline styles have the greatest "specificity", and they override all applicable rules, so your only remedy is !important (unless you can override the style property value somehow). 内联样式具有最大的“特异性”，它们会覆盖所有适用的规则，因此您唯一的补救措施是!important （除非您能以某种方式覆盖style属性值）。
EDIT : Sorry for overlooking the core question. 编辑 ：很抱歉忽略核心问题。 So, your recipe is as follows: 所以，你的食谱如下：
Insert 插入
<script> debugger; </script>
at the end of your <body> , open DevTools, and load the page. 在<body>的末尾，打开DevTools，然后加载页面。
Now, once you are in your DevTools debugger, switch to the Elements panel, and find the element that receives the inline style. 现在，一旦进入DevTools调试器，切换到Elements面板，找到接收内联样式的元素。 It should not have it just yet. 它应该还没有。
Right-click this element and in the context menu choose Break on... | 右键单击此元素，然后在上下文菜单中选择Break on... | Attribute modifications . Attribute modifications 。 Now, when the style attribute value changes, you should break on the respective JavaScript line. 现在，当style属性值更改时，您应该在相应的JavaScript行中断。 Good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.