css - GWT UiBinder 样式主名称不起作用

Question

我正在尝试使用 UiBinder 覆盖特定小部件的样式。我忽略了什么？

<ui:style>
  /*************
   * Note #1
   *************/
  .btnVote {
     display: inline-block;
     width: 50px;
     height: 50px;
     background: #fff;
     margin: 5px;
     text-align: center;
     outline: none;
     cursor: pointer;
  }

  /*************
   * Note #2
   *************/
  .btnVote-up-hovering, .btnVote-down-hovering {
     background: #ddd;
  }

  .btnVote-up-disabled, .btnVote-down-disabled {
     border-shadow: inset 0 1px 3px #aaa;
  }

  .lblName {
     line-height: 50px;
     font-size: 40px;
     padding: 5px 10px;
  }

  .clear {
     clear: both;
     overflow: auto;
  }

  .floatLeft {
     float: left;
  }
</ui:style>

<g:HTMLPanel styleName="{style.clear}">

    <g:FlowPanel styleName="{style.floatLeft}">

       /*************
        * Note #3
        *************/
        <g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
            (+)
        </g:PushButton>

        <g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
            (-)
        </g:PushButton>
    </g:FlowPanel>

    <g:FlowPanel styleName="{style.floatLeft}">

        <g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
    </g:FlowPanel>
</g:HTMLPanel>

注意 1:此规则正在被应用并且工作正常

注意 2:其他规则似乎被忽略了(它们没有生效)

注意 3:小部件的默认命名正在 正在重置，因此注意 1 工作正常。基类设置为 GOGXR1SCFI 而不是 gwt-PushButton

为什么其他规则不起作用？当我悬停小部件时，类 GOGXR1SCFI-up-hovering 确实设置为小部件，但没有随附的 CSS。

感谢您的帮助。

更新

我遇到的一些事情让我有一段时间很难过:当你使用@external 关键字时，你必须在@external 语句的末尾放置一个半列，如:

<ui:style>
@external .btnVote;
.btnVote {
   ...
}
</ui:style>

<g:FlowPanel styleName="{style.btnVote}"/>

Answer 1

您可以做的一件事是使用 ClientBundle 创建您的 CSS，在那里定义所有不同的状态，然后手动处理各种状态。这样您就不需要将类定义为@external，GWT 将为您优化 CSS(缩短名称，只发布使用的内容等)。这对于自定义小部件等特别有用。