css - p :layout and p:layoutUnit ignore the style

Question

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

问题来了，当我尝试调整它的 CSS 时。我想将其背景设置为无，我尝试了经典的 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;
}

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

Answer 1

不要摆弄 style 属性。只需给它一个您在 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