p:layout 和 p:layout 单位忽略样式

Question

我的问题很简单。我正在使用 PrimeFaces 4.0 和布局组件。

问题来了，当我尝试调整它的时候 CSS。我想将它的背景设置为 none，我尝试了经典的 style="background: none !important 但它忽略了我，然后我检查 Google Chrome 中的元素并看到 .ui-widget-content 风格是我想隐藏的那个然后我试试这个：

<p:layout style="min-width:400px;min-height:1000px; .ui-widget-content {background: none !important;}">
<p:layoutUnit position="west" size="620" minSize="40" style=".ui-widget-content {background: none !important;}">

但是还是不行。另外，在我的 css 主题中，我有：

body .ui-widget-content {

    border-style: hidden;
    border-color: white;
    border-width: 0px;
    color: #4f4f4f;
}

如果我在其中添加背景：none 它确实有效，但搞砸了我整个应用程序的主题。有没有办法隐藏单个小部件内容的背景？

Answer 1

不要 fiddle 使用 style 属性。只需给它一个 class，你在 CSS 文件中声明它。

<p:layout styleClass="backgroundless">

.ui-layout-container.backgroundless .ui-widget-content {
    background: none;
}

另请参阅：

How do I override default PrimeFaces CSS with custom styles?
CSS beginner tutorial

p:layout 和 p:layout 单位忽略样式

p:layout and p:layoutUnit ignore the style

css

jsf

primefaces

另请参阅：