使用UiBinder设置普通html元素的样式

我有以下UiBinder代码：

...
    <div>
        <g:Label>Hello,</g:Label>
        <g:Button ui:field="button" />
    </div>
...

。。。
你好
...

现在我想设计div元素的样式，假设给它一个红色边框。据我所知，明确的方法是定义一个样式属性，如下所示：

    <ui:style>
    .redborder {
        border: 1px solid red;
    }
    ...

</ui:style>

雷德博德先生{
边框：1px纯红；
}
...

因此，代码总体如下所示：

...
        <div styleName="{style.redborder}">
            <g:Label>Hello,</g:Label>
            <g:Button ui:field="button" />
        </div>
...

。。。
你好
...

但是在HTML页面中没有绘制红色边框。现在我用Firebug（或者你在Google Chrome中如何称呼它）查看页面，发现div元素有正确的类名，但是borwser还找不到该类。如果在另一方面，我把相同的风格元素的按钮，一切都很好

有人知道它是怎么回事吗

问候,，

---

Stefan

在常规DOM元素上，您的DIV在本例中没有setStyleName（）方法，因此只需使用class属性：

<div class="{style.redborder}"> ... </div>

。。。

styleName=“…”

适用于GWT小部件，因为它被转换为调用setStyleName（）方法

---

顺便说一下，你可能想考虑在你的小部件上使用<代码> AddioStulnMeist=“…”/代码>，这样你就可以添加（多个）CSS类名而不会意外地删除已经存在的类名。

< P> >像普通HTML一样，你必须用普通的HTML来思考。p> 让我们以您的案例为例：

<ui:style>
  .redborder {
    border: 1px solid red;
  }
  ...
</ui:style>

...

<div class="{style.redborder}">   <!--Notice I used class instead of styleName-->
  <g:Label>Hello,</g:Label>
  <g:Button ui:field="button" />
</div>

....

雷德博德先生{
边框：1px纯红；
}
...
...
你好
....

所以只需使用“class”属性而不是“styleName”。

谢谢，我也找到了它。