如何更改面板标题CSS？

我想更改面板标题（标题）的CSS。但我不知道如何去做。如何更改面板标题CSS？

我想通过我自己的类来代替类v-panel-caption

<div class="v-panel v-widget v-has-width v-has-height"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="v-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

<div class="v-panel v-widget v-has-width v-has-height"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="my-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

的解决办法是定义一个主风格：

public class myPanel extends Panel { 

    public myPanel() { 
     this.setCaption("My Caption"); 
     this.setContent(new Label("test"); 
     this.setPrimaryStyleName("my-panel-caption"); 
    } 
}

但这种改变只有全球<div>：

<div class="v-panel-my-panel-caption my-panel-caption"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="v-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

有什么方法可以自定义面板标题CSS？或者我应该编写一个新的布局（也许使用CssLayout）？

我发现的唯一方法是使用CSS重要的标记：

.my-panel-caption { 
    box-sizing: border-box !important; 
    padding: 0 12px !important; 
    line-height: 36px !important; 
    border-bottom: 5px solid #23C344 !important; 
    background-color: #4F9EE5 !important; 
    color: #FFFFFF !important; 
    font-weight: 400 !important; 
    font-size: 14px !important; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important; 
    border-radius: 3px 3px 0 0 !important; 
    background-image: none !important; 
    box-shadow: none !important; 
}

但我不喜欢这样:(

由于提前，

来源

2016-06-10 Splendf

通常，我为组件添加一个自定义样式名称，然后重新定义样式。例如：'.my-panel .v-panel-caption {background-color：red; }'......这应该没有'！important'。 –

实际上，我只是想为特定页面定制此面板。不是为了所有人。 – Splendf

对不起，我很蠢:) – Splendf

在尝试这个 .java：

myPanel.setStyleName("customStyle");

and in .css：

.v-panel-caption-customStyle { 
    text-align: center !important; 
}

来源

2017-09-19 23:55:41

如何更改面板标题CSS？

回答

相关问题