Question

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

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

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

Answer 1

与任何ClientBundle和CssResource一样：创建一个扩展Datagrid.Resources的接口，并使用指向您自己的dataGridStyle注释覆盖@Source方法CSS文件（或者可能同时包含原始文件和您自己的文件，因此它们将组合在一起）。

这样做会覆盖应用中所有 DataGrid的样式（实际上取决于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;
}

就是这样

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

2 个答案: