使用外部样式表时 GWT UiBinder 中的 CSS 选择器/继承答案

【问题标题】：CSS selector/inheritance in GWT UiBinder when using external stylesheet使用外部样式表时 GWT UiBinder 中的 CSS 选择器/继承
【发布时间】：2012-04-19 15:41:41
【问题描述】：

我正在使用 GWT 2.4.0 + UiBinder。

在我的 ui.xml 文件中，我使用下面的行引用了外部样式表。

<ui:style
    type="com.codelaboration.twykin.frontend.widgets.qa.client.view.QABox.QAStyle"
    src="QABox.css" />

现在我在同一个 ui.xml 文件中有以下代码

<div class="{style.imagePanel}">
      <div ui:field="lblUser"/>
</div>

在 QABox.css 中，我定义了“imagePanel”，并使用 CSS 继承将 CSS 应用于 imagePanel 类中的所有 div：

.imagePanel {float: left; width: 100px; text-align: center;}
.imagePanel div {float: right; width: 530px;}

现在的问题是 GWT 掩盖了样式名称，所以现在 imagePanel 将被更改为一些奇怪的名称，因此“.imagePanel div”将无法正常工作。所以基本上我的问题是当仅在 ui.xml 中声明外部样式表时如何在 UiBinder 中使用 CSS 选择器。

谢谢。

【问题讨论】：

为什么它不起作用？ GWT 还会将 .imagePanel div 选择器更改为 .obfuscated-imagePanel-whatever-it-is div。
我试过了，但是没用。可能是我做错了什么。我会再试一次，谢谢回复。
是的，Thomas 你说得对。谢谢

标签： gwt uibinder css

【解决方案1】：

您可以在您的 gwt 应用程序中添加外部 css。您必须提供样式资源的相对路径。

听到的是一段代码。

在你的 uibinder xml 中

<ui:style src="QAStyle/QABox.css" />

    <div class="{style.imagePanel}">
          <div ui:field="lblUser"/>
    </div>

它会在 QAStyle 包中找到 css。

或者您也可以使用 ClientBundle 来避免您的路径问题。见Using an external resource。

它会帮助你。

【讨论】：