使用GWT设置样式小部件：在哪里放置样式规则？

Question

我的一个小部件包含一个以编程方式生成的ToggleButton列表。我想对它们进行设计，但我不确定最佳方法是什么。 GWT提供了我可以覆盖的.gwt-ToggleButton-up和.gwt-ToggleButton-Down等规则。我可以通过将我的规则放在style.css文件中并从我的HTML文件中引用它来覆盖这些（尽管这种方法已被弃用）。

如果我在包含按钮的UiBinder中包含以下内容，则不会应用这些样式：

<ui:style>
  .gwt-ToggleButton-down {
      color: red;
  }

  .gwt-ToggleButton-up {
      color: red;
  }
</ui:style>

（我猜测这与GWT如何模糊CSS名称有关。）

我还可以创建一个新的UiBinder组件，它只包含ToggleButton来应用我自己的样式规则，但这可能会造成不必要的麻烦。

我是否应该完全忽略.gwt-ToggleButton-*规则并定义我自己的规则，并将其应用于toggleButton.addStyleName()？或者另一种方法更可取？

Answer 1

@external会阻止混淆，如果这是您想要去的路线。

<ui:style>
  @external gwt-ToggleButton-down, gwt-ToggleButton-up;
  .gwt-ToggleButton-down {
      color: red;
  }
  .gwt-ToggleButton-up {
      color: red;
  }
</ui:style>

Answer 2

您需要将所有样式放入位于 war 文件夹下的 .css 文件中。