如何为DataGrid标头覆盖GWT模糊处理样式

Question

我试图弄清楚如何覆盖DataGrid.css中定义的dataGridHeader样式!GWT核心.使用adler32对GWT样式名称进行模糊处理,因此我不能简单地在我的css中使用.dataGridHeader.在我的情况下,我希望简单地改变白色空间:正常.

我在这里看过有关注入css的文章,但它们看起来都是类级别,而不是像DataGrid这样的组件中使用的子样式.

如何覆盖DataGrid等组件中使用的标题样式？

Answer 1

就像任何ClientBundle和CssResource:创建一个扩展Datagrid.Resources和覆盖dataGridStyle方法的接口,@Source注释指向您自己的CSS文件(或者可能同时指向原始文件和您自己的文件,因此它们将组合在一起).

这样做会覆盖你的应用程序中所有 DataGrid s 的样式(它实际上取决于首先CssResource获得的实例ensureInjected():来自原始实例DataGrid.Resources或来自子接口的实例):因为你使用相同的返回类型(DataGrid.Style),混淆的类名称将是相同的.

如果你想根据具体情况改变样式,那么,另外,声明一个扩展的接口DataGrid.Style并将其用作dataGridStyle覆盖的返回类型:因为混淆的类名基于完全限定的接口名称和方法名称,您的DataGrid.Style子接口将生成与原始DataGrid.Style接口不同的混淆类名.

当然,GWT.create()你的DataGrid.Resources子接口并将其作为参数传递给DataGrid构造函数.

另请参阅http://code.google.com/p/google-web-toolkit/issues/detail?id=6144

Answer 2

谢谢托马斯.

只是为了让读者更容易......

创建一个新的接口

public interface GwtCssDataGridResources extends DataGrid.Resources {
      @Source({Style.DEFAULT_CSS, "gwtDataGrid.css"})
      Style dataGrid();
}

使用静态引用

public static final GwtCssDataGridResources gwtCssDataGridResources = GWT.create(GwtCssDataGridResources.class);

    static {
        gwtCssDataGridResources.dataGrid().ensureInjected();
    }

最后创建一个新的CSS文件gwtDataGrid.css.请注意,如果需要覆盖样式,则必须在每个定义上使用!important.

.dataGridHeader {
    color: #FF0000 !important;
}

.dataGridFirstColumnHeader {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

.dataGridLastColumnHeader {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
}

而已