如何正确使用GWT中导入的CSS样式

前端之家收集整理的这篇文章主要介绍了如何正确使用GWT中导入的CSS样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

想象一下,您使用UiBinder创建了以下简单小部件:

package my.package;
// some imports here

public class Widget1 extends Composite {
    private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class);

    interface Widget1UiBinder extends UiBinder

在您创建的另一个(父)窗口小部件中使用此简单窗口小部件:

package my.package;
// imports go here
public class ParentWidget extends Composite {
    private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class);

    interface ParentWidgetUiBinder extends UiBinder

你想要实现的是使用css在列表中的Widget1条目之间获得一些余量.但这不起作用.因为GWT会混淆css名称. ParentWidget中.childWidgetStyle的混淆名称将与Widget1中的.childWidgetStyle不同.生成的css看起来与此类似:

.G1unc9fbE {
    border-style:dotted;
    border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
    margin-bottom:10px;
}

因此保证金设定不适用.我该怎么做呢?

最佳答案
诀窍是将css类名导入ParentWidget:

重要的是,如果你不使用ImportedWithPrefix注释,GWT会在导入的样式名前加上css类所在资源的类名.所以childWidgetStyle变成.Widget1Style-childWidgetStyle.

(编辑:在评论documentation之后删除了关于@Shared的部分.)

猜你在找的CSS相关文章