java - GWT - 设置 TabLayoutPanel 样式的问题

Question

我想使用 TabLayoutPanel 实现水平导航栏，使用自定义样式来满足我的需要。

但我不知道如何覆盖 default 样式。这是 UiBinder 模板:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

这行不通。但是我怎样才能引用默认样式呢？

Answer 1

为了详细说明 atamur 的回答，他建议的第二个选项确实是两者中更好的一个，尤其是如果您的所有其他样式都是使用 UiBinder 或客户端包设置的。基本上，您在初始 <ui:style> 下面添加以下行标签:

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

问题在于 GWT 混淆了您在 UiBinder 模板中定义的样式规则。因此，当您编写“gwt-TabLayoutPanel”时，它会被混淆为“GMDW0RHDH”之类的内容，然后永远不会应用于您的 TabLayoutPanel 的元素。添加“@external”可禁用此混淆，并允许按您的预期应用 UiBinder 中的样式。