Question

我目前正在使用GWT开发Web应用程序。对于特定视图，我不得不使用GWT DataGrid小部件。由于我在使用CSS样式时遇到了麻烦，因此我决定通过在检查页面时通过获取其名称来重新插入应用于其标题和其他部分的特定样式来覆盖默认样式。

这是我在自定义CSS样式表中添加的内容：

.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow {
    background-color: #444444 !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRowCell {
    border: 2px solid #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridOddRowCell {
    border: 2px solid #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridOddRow {
    background-color: #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridHeader {
    color: #aaaaaa !important;
    text-shadow: #4d4d4d 0px 0px 0 !important;
    padding: 0px !important;
}
.com-google-gwt-resources-client-CommonResources-InlineBlockStyle-inlineBlock {
    background-color: #4d4d4d !important;
}

我知道＆＃34;！important＆＃34;应该是最后的手段，除了注意事项之外，我已经覆盖了默认样式，当我在＆＃34;超级开发模式＆＃34;中运行我的应用程序时它非常有用。

部署.war文件时出现问题。除了我已覆盖的样式外，我的样式表中的每个自定义样式都会正确应用。加载页面时Chrome控制台没有显示任何错误，当我检查页面时，这些样式似乎丢失了。

有谁知道这里出了什么问题以及如何解决？请注意，我不太熟悉网站开发，而且这是我第一次编写网络应用程序。

Answer 1

我建议您使用客户端软件包正确设置DataGrid的样式：

创建一个名为＆＃34; DataGridPatch.css＆＃34;的新css表。例如，包括所需的类，如：

CPTXYAxisSet *axisSet         = (CPTXYAxisSet *)self.weightHistoryChart.axisSet;
CPTXYAxis *x                  = axisSet.xAxis;
x.labelingPolicy = CPTAxisLabelingPolicyNone;
NSArray *customTickLocations = [NSArray arrayWithObjects:@1.0, @3.0, @5.0, nil];
NSMutableSet *customLabels   = [NSMutableSet setWithCapacity:3];

for ( NSNumber *tickLocation in customTickLocations ) {

    CPTTextLayer *layer = [[CPTTextLayer alloc] initWithText:@"label"];
    CPTAxisLabel *newLabel = [[CPTAxisLabel alloc] initWithContentLayer:layer];
    newLabel.tickLocation = tickLocation;
    newLabel.offset       = 0;
    [newLabel.contentLayer setBackgroundColor:[UIColor lightGrayColor].CGColor];
    [customLabels addObject:newLabel];
}

x.axisLabels = customLabels;

然后创建界面：

.dataGridHoveredRowCell{}
.dataGridHoveredRow {}
.dataGridOddRowCell {}
.dataGridEvenRowCell {}
.dataGridOddRow {}
.dataGridEvenRow {}
.dataGridSelectedRowCell {}
.dataGridCell {}
.dataGridSelectedRow {}
.dataGridHeader {}

然后简单地实例化数据网格，如下所示：

public interface CustomDataGridStyle extends DataGrid.Style{}

public interface TableResources extends DataGrid.Resources {
       @Override
       @Source(value = {CustomDataGridStyle.DEFAULT_CSS, "DataGridPatch.css"})
       CustomDataGridStyle dataGridStyle();
}

Answer 2

你的问题是这些样式在dev mod中没有被混淆，所以它们看起来像.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow。编译和部署war文件时，所有文件通常都是模糊处理的，看起来像.GKY5KDJCI。所以在制作中你并没有压倒这些风格您可以使用属性更改gwt.xml文件中的模糊处理级别：
<set-configuration-property name="CssResource.style" value="pretty"/> 其他可用选项包括：debug，stable，stable-shorttype，stable-notype。默认是混淆的。
无论如何，你应该按照Youssef Lahoud建议的apporach为你的数据网格提供一个自定义的css资源。

部署后未应用重写的GWT CSS样式

2 个答案: