5

我将 GWT 与 UiBinder 一起使用，但不知何故无法让默认的 CSS 样式规则正常工作。到目前为止，我已经通过分配自定义 CSS 类名称成功地设置了组件的样式，如下所示：

<ui:style>
    .createButton {
        background-color: red;
    }
</ui:style>

<g:FlowPanel>
   <g:Button styleName="{style.createButton}">Create</g:Button>
</g:FlowPanel>

但是当使用 GWT 的默认 CSS 类名（如下例所示）时，根本不会应用该样式：

<ui:style>
    .gwt-Button {
        background-color: red;
    }
</ui:style>

<g:FlowPanel>
   <g:Button>Create</g:Button>
</g:FlowPanel>

我认为这可能与 GWT 处理 UiBinder 类名的方式有关。当我在将 UiBinder 样式名设置为 {style.createButton} 后使用 Firebug 检查 Web 应用程序中的按钮时，它使用了某种混淆的类名：

class="GBMSFK0DJJ"

当我在根本没有分配任何类名后检查它时，它说：

class="gwt-Button"

虽然按钮似乎有正确的类名，但我在 UiBinder 样式部分定义的样式并没有应用。我错过了什么还是这是一个错误？

（如果您想知道为什么我不只是将我自己的自定义样式名称分配给按钮：我实际上是在尝试使用 .gwt-TreeItem 来设置 TreeItems 的样式，但按钮类可能是一个更好的示例。）

4

1 回答 1

10

.gwt-Buttonin 你的ui:style将被混淆，因此不会应用于class="gwt-Button".

您必须将其标记@external为不会被混淆： 

@external .gwt-Button;

.gwt-Button { background-color: red; }
于 2012-05-27T14:00:42.873 回答